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紧密 围绕 HTML5+CSS3 。 经 过 作者 精心 设计 和 挑 对 于 精 选 实例 ， 给 出 详细 
+JavaScript 开 发 Web 前 。 选 的 实例 都 是 从 实际 开 步骤、 结构 清晰 简明 、 分 
端 页 面 展 开讲 解 ， 具 有 很 。 发 中 的 经 验 总 结 而 来 ， 析 深 入 浅 出 ， 而 且 有 些 程 
强 的 逻辑 性 和 系统 性 。 涵盖 了 实际 开发 中 所 遇 序 能 够 直接 在 项 目 中 使 
到 的 各 种 问题 。 用 ， 避 免 进 行 二 次 开发 。 
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本 书 从 网 站 基础 开始 ， 结 合 大 量 案例 ， 全 面 、 翔 实地 介绍 了 使 用 HTML5+CSS3+JavaScript 开 发 Web 前 端 
页 面 的 具体 方法 与 步骤 ， 引 导读 者 从 零 开 始 ， 一 步 步 掌 握 Web 开 发 的 全 过 程 。 本 书 通 过 一 个 个 鲜 活 、 典 型 的 
实例 来 讲解 每 个 语法 ， 力 求 达到 理论 知识 与 实践 操作 完美 结合 的 效果 。 
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过 程 。 
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四 前 言 
刚 霹 
随 着 网 络 带宽 的 飞速 提升 和 网 络 技术 的 不 断 发 展 ， 获 取 数 据 的 方式 也 比 以 前 快捷 得 多 ， 而 网 

页 是 最 重要 的 表现 形式 之 一 。 这 几 年 虽然 新 技术 层出不穷 ， 并 且 日 新 月 异 ， 但 有 一 点 是 肯定 的 ， 

不 管 是 采用 什么 技术 设计 的 网 站 ， 用 户 在 客户 端 通过 打开 浏览 器 看 到 的 网 页 都 是 静态 网 页 ， 都 是 
9 HIML、JavaScript 和 CSS 技术 构成 的 ， 所 以 如 果 想 从 事 网 页 设计 或 从 事 网 站 管理 相关 工作 ， 
就 必须 学 习 HIML、JavaScript 和 CSS 技术， 哪怕 只 是 简单 地 了 解 ， 因 为 HIML、JavaScript 和 
CSS 技术 是 网 页 制作 技术 的 基础 和 核心 。 

本 书 紧密 围绕 网 页 设计 师 在 制作 网 页 过 程 中 的 实际 需要 和 应 该 掌握 的 技术 ， 全 面 介绍 了 使 用 
HTML、CSS、JavaScript 进行 网 页 设计 和 制作 各 方面 的 内 容 和 技巧 。 本 书 在 讲解 时 采用 了 最 新 的 
HIMLS 规范 和 CSS3 标准 ， 并 以 Chrome 浏览 器 为 主要 测试 环境 。 


本 书 内 容 


全 书 共 分 15 章 ， 主 要 内 容 如 下 。 

页 第 1 章 初步 认识 HTML5 和 CSS3。 本 章 首先 带领 读者 了 解 网 页 设计 的 基础 知识 和 Web 
标准 布局 知识 ， 然 后 介绍 从 HIML 到 XHTML 再 到 HIMLS 的 过 渡 ， 之 后 对 HIMLS 的 语法 做 了 
详细 介绍 ， 最 后 介绍 了 CSS3 的 优 缺 点 、 新 增 特 性 以 及 性 能 测试 方法 。 

二 第 2 章 HTML5 网 页 结构 。 本 章 主要 介绍 HTML5 中 新 增 的 与 网 页 结构 相关 的 元 素 ， 包 
插头 部 元 素 、 结 构 元 素 、 语 义 元 素 、 节 点 元 素 、 交 互 元 素 以 及 新 增 全 局 属性 。 

二 第 3 章 HIML5 表单 应 用 。 本 章 主要 介绍 HIML5 中 新 增 的 表单 输入 类 型 、 表 单 属性 、 
表单 元 素 和 表单 验证 方式 。 

国 第 4 章 HTML5 多 媒体 应 用 。 本 章 主要 介绍 使 用 HTML5 新 增 的 video 元 素 和 audio 元 
素 播放 视频 和 音频 。 

国 第 5 章 HIML5 绘图 应 用 。 本 章 主 要 介绍 使 用 canvas 元 素 绘制 各 种 图 形 ， 如 绘制 三 角形 、 
文本 、 渐 变 和 阴影 等 ， 以 及 操作 图 形 的 各 种 方法 ， 如 平移 、 缩 放 和 坐标 转换 等 。 

国 第 6 章 HTML5 数据 存储 。 本 章 主要 介绍 HTML5 中 新 增 的 两 种 数据 存储 方式 ， 即 Web 
存储 和 本 地 数据 库存 储 。 

二 第 7 章 文件 和 离线 应 用 。 本 章 将 从 文件 和 离线 两 个 方面 展开 对 HIMLS 新 特性 的 
讲解 ， 主 要 包括 允许 选择 多 个 文件 、 读 取 文 件 的 信息 和 内 容 、 实 现 文件 上 传 以 及 判断 是 否 在 
线 等 。 

夸 第 8 章 HTML5 高 级 开发 。 本 章 从 4 个 方面 讲解 HTMLS5 的 高 级 特性 ， 分 别 是 拖 放 操作 、 
跨 文档 通信 、 多 线程 和 地 理 位 置 。 

二 第 9 章 CSS3 选择 器 。 本 章 主要 介绍 CSS3 新 增 选择 器 的 使 用 ， 如 属性 选择 器 、 伪 类 选 
择 器 和 伪 对 象 选择 器 等 。 

页 第 10 章 CSS3 新 增 的 基本 属性 。 本 章 主要 介绍 CSS3 中 新 增加 的 背景 、 边 框 、 字 体 、 
颜色 等 相关 属性 ， 例 如 与 背景 有 关 的 background-clip、background-size、background-origin 属性 ， 
与 边框 有 关 的 border-radius、box-shadow、border-image 属性 等 。 

坪 第 11 章 ， 变形、 过 渡 和 动画 。 本 章 主要 介绍 CSS3 的 动画 功能 ， 包 括 变 形 效 果 、 过 渡 效 
果 和 动画 帧 等 。 

页 第 12 章 CSS3 新 增 的 高 级 属性 。 本 章 主 要 介绍 CSS3 中 新 增加 的 其 他 属性 ， 例 如 多 列 
布局 属性 、 盒 模型 布局 属性 、 渐 变 属性 等 。 
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国 第 13 章 JavaScript 脚本 编程 快速 入 门 。 本 章 主要 介绍 JavaScript 的 基础 知识 ， 包 括 
JavaScript 语言 的 语法 规则 、 运 算 符 、 流 程控 制 语句 、 对 话 框 语句 、 函 数 以 及 常用 对 象 的 用 法 等 
内 容 。 

针 第 14 章 JavaScript 事件 和 DOM。 本 章 主 要 介绍 原始 事件 模型 和 标准 事件 模型 ， 以 及 
DOM 操作 节点 的 方法 ， 如 遍历 、 插 入、 复制 、 蔡 换 和 删除 等 。 

写 第 15 章 综合 案例 。 本 章 通过 打 地 鼠 、 贪 吃 蛇 、 小 猫 笑 脸 和 图 片 轮 播 4 个 综合 案例 ， 介 
绍 了 Web 前 端 设 计 的 完整 过 程 。 


区 本 书 特色 

本 书 采用 大 量 的 实例 进行 讲解 ， 力 求 通过 实际 操作 使 读者 更 容易 地 制作 前 端 页 面 、 设 计 页 面 
样式 和 操作 页 面 脚本 。 本 书 难 度 适中 ， 内 容 由 浅 入 深 ， 实 用 性 强 ， 覆 盖 面 广 ， 条 理 清晰 。 
[对 | 知识 点 全 

本 书 紧 紧 围绕 前 端的 HTML5、CSS3 和 JavaScript 展开 讲解 ， 具 有 很 强 的 逻辑 性 和 系统 性 。 
[对 | 实例 丰富 | 

各 章 实例 短小 却 又 能 体现 出 知识 点 ， 让 读者 很 轻松 地 学 习 ， 并 能 灵活 地 应 用 到 实际 的 软件 项 
目 中 。 


[中 | 应 用 广泛 | 

对 于 精 选 案例 ， 给 出 了 详细 步骤 ， 结 构 清晰 简明 ， 分 析 深 入 浅 出 ， 而 且 有 些 程序 能 够 直接 在 
项 目 中 使 用 ， 避 免 读 者 进行 二 次 开发 。 
[| 基于 理论 ， 注 重 实践 

本 书 在 讲述 理论 知识 的 过 程 中 ， 在 合适 位 置 安排 了 综合 应 用 实例 或 者 小 型 应 用 程序 ， 将 理论 
应 用 到 实践 中 ， 可 以 提高 读者 的 实际 应 用 能 力 ， 巩 固 开发 基础 知识 。 
由 心 的 提示 | 

为 了 便于 读者 阅读 ， 全 书 还 穿插 着 一 些 技巧 、 提 示 等 小 贴 士 ， 体 例 约定 如 下 。 

提示 : 通常 是 一 些 贴心 的 提醒 ， 或 者 是 让 读者 加 深 印象 ， 或 者 是 提供 建议 ， 或 者 是 解决 问题 
的 方法 。 

注意 : 提出 学 习 过 程 中 需要 特别 注意 的 一 些 知识 点 和 内 容 ， 或 者 相关 信息 。 

技巧 : 通过 简短 的 文字 ， 指 出 知识 点 在 应 用 时 的 一 些小 窍门 。 


准 读者 对 象 

本 书 内 容 简明 易 懂 ， 有 丰富 的 案例 和 习题 ， 既 可 作为 在 校 大 学 生 学 习 使 用 前 端 网 页 设计 的 
参考 资料 ， 也 适合 作为 高 等 院 校 相关 专业 的 教学 参考 书 ， 还 可 以 作为 非 计算 机 专业 学 生 学 习 
HTML+CSS+JavaScript 的 参考 书 。 

本 书 由 刘 爱 江 、 靳 智 良 编著 ， 参 与 本 书 编写 及 设计 工作 的 还 有 郑 志 荣 、 侯 艳 书 、 刘 利 利 、 
侯 政 洪 、 肖 进 、 李 海燕 、 侯 政 云 、 祝 红 涛 、 崔 再 喜 、 贺 春雷 等 ， 在 此 表示 感谢 。 在 本 书 的 编写 
过 程 中 ， 我 们 力求 精益 求 精 ， 但 难免 存在 一 些 不 足 之 处 ， 茹 请 广大 读者 批评 指正 。 
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从 2010 年 开始 ，HTML5 和 CSS3 一 直 是 互联 网 技术 中 最 受 关注 的 两 个 话题 ， 特 别 是 在 
2010 年 的 互联 网 大 会 上 把 前 端 技术 的 发 展 分 为 3 个 阶段 : 第 一 个 阶段 是 以 Web 1.0 为 主 的 网 
络 阶段 ， 前 端 主流 技术 是 HTML 和 CSS; 第 二 个 阶段 是 Web 2.0 的 Ajax 应 用 阶段 ， 前 端 主流 
技术 是 JavaScript、.DOM 和 异步 数据 请 求 第 三 个 阶段 是 HTML5 和 CSS3 的 Web App 应 用 阶段 。 
第 三 个 阶段 的 HTML5 和 CSS3 相辅相成 ， 使 互联 网 进入 一 个 崭新 的 时 代 。 

本 章 首先 带领 读者 了 解 网 页 设计 的 基础 知识 和 Web 标准 布局 知识 ， 然 后 介绍 从 HTML 到 
XHTML 再 到 HTML5 的 过 渡 , 之 后 对 HTML5 的 语法 做 了 详细 介绍 , 最 后 介绍 了 CSS3 的 优 缺 点 、 
新 增 特 性 以 及 性 能 测试 方法 。 
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7) 1.1 ”认识 网 页 和 网 站 


网 页 和 网 站 是 相互 关联 的 两 个 因素 ， 两 者 之 间 相 互 作 用 ， 共 同 推动 了 互联 网 技术 的 飞速 
发 展 。 本 节 将 对 网 页 和 网 站 的 基本 概念 进行 简要 说 明 。 


叫 》1.1.1 网 页 


网 页 和 网 站 是 有 差别 的 ， 例 如 平常 说 ; 
的 搜狐 、 新 浪 和 网 易 等 都 是 网 站 ， 而 网 易 上 : 
的 一 篇 文学 类 文章 就 是 一 个 网 页 。 从 严格 意 | 
义 上 讲 ， 网 页 (Web Page) 是 网 站 中 使 用 
HTML 等 标记 语言 编写 而 成 的 单个 文档 。 它 | 
是 网 站 中 的 信息 载体 。 一 个 典型 的 网 页 由 以 | 
下 几 个 元 素 构成。 | 


臣 广 * 

文本 是 网 页 中 最 重要 的 信息 ， 在 网 页 中 ; 
可 以 通过 字体 、 大 小 、 颜 色 、 底 纹 、 边 框 等 : 
来 设置 文本 的 属性 。 在 网 页 概念 中 的 文本 是 ; 
指 文字 字符 ， 但 不 是 图 片 中 的 文字 。 在 网 页 ; 
制作 中 ， 可 以 方便 地 为 文本 设置 各 种 字体 、 
大 小 和 颜色 。 


区 可 
图 像 是 页 面 中 最 重要 的 构成 部 分 ， 图 像 ; 
就 是 网 页 中 的 图 ， 如 明星 图 片 和 自然 风光 图 ; 
片 。 在 网 页 中 只 有 加 入 图 像 后 才能 使 页 面 达 ; 
到 完美 的 显示 效果 ， 可 见 图 像 在 网 页 中 的 重 ; 
要 性 。 在 网 页 设计 中 用 到 的 图 片 一 般 为 JPG | 
和 GIF 格式 。 


二 起 链接 

超 链接 是 指 从 一 个 网 页 指向 另 一 个 目 ; 
的 端的 链接 ， 是 从 文本 、 图 片 、 图 形 或 图 ， 
像 映 射 到 全 球 广域网 上 的 网 页 或 文件 的 指 | 
针 。 在 因特网 上 ， 超 链接 是 网 页 之 间 和 Web 
站 点 主要 的 导航 方法 。 由 此 可 见 ， 超 链接 ; 
是 一 个 神奇 的 功能 ， 移 动 鼠 标 就 可 以 逛 遍 | 
全 世界 。 

切 去 从 


表格 大 家 都 知道 ， 


如 日 常生 活 中 | 


不同 的 框架 ， 


经 常见 到 的 小 如 值 日 轮流 表 ， 大 到 国家 
统计 局 的 统计 表 。 表 格 是 传统 网 页 排版 
的 灵魂 ， 即 使 CSS 标 准 推出 后 也 能 够 
继续 发 挥 不 可 估量 的 作用 。 通 过 表格 可 
以 精确 地 控制 各 种 网 页 元 素 在 网 页 中 的 
位 置 。 


区 表单 

表单 的 作用 很 重要 ， 它 是 用 来 收集 站 点 
访问 者 信息 的 域 集 ， 是 站 点 服务 器 处 理 的 一 
组 数据 输入 域 。 当 访问 者 单 击 按钮 或 图 形 提 
交 表 单 后 ， 数 据 就 会 被 传送 到 服务 器 。 表 单 
网 页 可 以 用 来 收集 浏览 者 的 意见 和 建议 ， 以 


| 实现 浏览 者 与 站 点 之 间 的 互动 。 


上 王 Flash 动画 

Flash 一 经 推出 便 迅 速成 为 最 重要 的 Web 
动画 形式 之 一 。Flash 利用 自身 所 具有 的 关键 
帧 补 间 、 运 动 路 径 、 动 画 蒙 版 、 形 状 变形 和 
洋葱 皮 等 动画 特性 ， 不 仅 可 以 制作 Flash 电 


| 影 ， 而 且 可 以 把 动画 输出 为 不 同 格式 的 视频 


文件 。 


区 和 


框架 是 网 页 中 一 种 重要 的 组 织 形式 ， 它 


“能够 将 相互 关联 的 多 个 网 页 的 内 容 组 织 在 一 


个 浏览 器 窗口 中 显示 。 框 架 网 页 是 一 种 特殊 
的 HIML 网 页 ， 它 能 够 将 浏览 器 视窗 分 为 
每 一 个 框架 可 显示 一 个 不 同 的 
网 页 。 

如 图 1-1 所 示 就 是 由 上 述 元 素 构成 的 


| 典型 网 页 ， 为 浏览 者 呈现 出 绚丽 的 界面 效 
， 果 。 在 本 书后 面 的 章节 将 和 读者 一 起 来 领略 
， HTMLS 的 神奇 ， 共 同 开始 我 们 的 网 页 设计 神 


奇 之 旅 。 
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叫 )》 1.1.2 网 站 


简单 来 说 ， 网 站 〈Web Site) 就 是 多 个 网 页 的 集合 ， 即 根据 一 定 的 规则 ， 将 用 于 展示 特 
定 内 容 的 相关 网 页 ， 通 过 超 链接 构成 一 个 整体 。 通 俗 地 讲 ， 网 站 就 像 因特网 上 的 布告 栏 一 样 ， 
人 们 可 以 通过 网 站 发 布 资讯 ， 或 者 利用 网 站 提供 相关 的 网 络 服务 。 人 们 可 以 通过 网 页 浏览 
访问 网 站 ， 获 取 自 己 需要 的 资讯 或 者 享受 网 络 服务 。 常 见 的 网 站 有 搜狐 、 新 浪 、 雅 虎 等 。 

一 个 典型 网 站 的 内 容 结 构 如 图 1-2 所 示 。 网 站 内 容 结构 中 的 各 种 元 素 在 服务 器 上 保存 在 
不 同 的 文件 夹 内 ， 典 型 的 目录 结构 如 图 1-3 所 示 。 


网 站 网 站 


1du12SeAer+ess9+9S1W1H 必 ) 


咱 》1.1.3 ”网 站 制作 流程 


设计 师 和 企业 决策 者 是 制作 网 站 的 关键 人 物 ， 所 以 要 以 决策 者 决定 做 网 站 的 那 一 刻 作 为 
制作 网 站 的 开始 。 网 站 制作 的 基本 流程 如 下 。 
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= ee SC 

OfD 初始 商讨 : 决策 者 确定 站 点 的 整体 定位 和 主题 ， 明 确 建立 网 站 的 真正 目的 ， 并 确定 
网 站 的 发 布 时 机 。 

四 加 需求 分 析 ， 充 分 考虑 用 户 的 需求 和 站 点 拥有 者 的 需求 ， 确 定 当前 的 业务 流程 。 重 点 
分 析 浏览 用 户 的 思维 方式 ， 并 对 竞争 对 手 的 信息 进行 分 析 。 

Ig 加 综合 内 容 ， 确定 各 个 页 面 所 要 展示 的 信息 ， 进 行 页 面 划分 。 

国 珍 页 面 布局 ， 设 计 页 面 ， 根 据 页 面 内 容 进行 对 应 的 页 面 设计 ， 在 规划 的 页 面 上 使 内 容 
合理 地 展现 出 来 。 

四 号 测试 ， 对 每 个 设计 好 的 分 页 进行 浏览 测试 ， 最 后 要 对 整个 网 站 的 页 面 进行 整体 
测试。 

在 设计 一 个 网 站 的 时 候 ， 应 该 遵循 “合理 、 简 约 、 美 观 、 大 方 ”四 个 原则 。 也 就 是 说 ， 
复杂 的 不 一 定 是 最 好 的 ， 合 理 的 才 是 最 好 的 。 网 站 设计 的 基本 原则 如 下 。 

(1) 网 页 内 容 要 便于 阅读 。 

(2) 站 点 内 容 要 精 、 专 和 及 时 更 新 。 

(3) 注重 整体 的 色彩 搭配 。 

(4) 考虑 带宽 因素 。 

(5) 适当 考虑 不 同 浏览 器 、 不 同 分 辨 率 的 情况 。 


川 ) 1.1.4 网 页 设计 流程 
网 页 和 网 站 技术 是 互联 网 技术 的 基础 ， 通 过 合理 的 操作 流程 可 以 快速 地 制作 出 美观 大 方 


的 站 点 。 
加 多 确定 主题 ， 主 题 要 明确 ， 例 如 要 在 网 页 中 显示 某 款 产 品 的 神奇 功效 ， 就 不 能 以 公司 


ia 准备 素材 资料 根据 页 面 选择 的 主题 准备 好 素材 ， 例 如 某 款 产 品 的 图 片 。 

到 规划 页 面 布 局 : 根据 前 两 步 确定 的 主题 和 准备 的 资料 进行 页 面 规划 ， 确 定 页 面 的 
总 体 布局 。 此 工作 可 以 通过 画 草 图 的 方法 实现 ， 也 可 以 在 Dreamweaver 编辑 器 工具 里 直接 
规划 。 

四 如 插入 素材 资料 ， 将 处 理 过 的 素材 和 资料 插入 布局 后 的 页 面 的 指定 位 置 。 

轿 吕 添加 页 面 链接 : 根据 整体 站 点 的 需求 ， 在 页 面 上 添加 超 链接 ， 实 现 站 点 页 面 的 跨度 
访问 。 

四 页 面 美化 : 将 上 面 完 成 的 页 面 进行 整体 美化 处 理 。 例 如 ， 利 用 CSS 将 表格 线 细 化 ， 
设置 文字 和 颜色 ， 对 图 片 进 行 滤 镜 和 搭配 处 理 等 操作 。 


叫 )》 1.1.5 发布 站 点 


发 布 站 点 的 具体 操作 流程 如 下 。 

加 多 申请 域名 :选择 合理 、 有 效 的 域名 。 

因 吕 选择 主机 : 根据 站 点 的 状况 确定 主机 的 部 署 方式 和 配置 。 

加 一 选择 硬件 : 如 果 需 要 站 点 体现 出 更 为 强大 的 功能 ， 可 以 配置 特定 的 设备 。 

加 软件 选择 : 选择 与 硬件 相配 套 的 软件 ， 例 如 服务 器 的 操作 系统 和 安全 软件 等 。 

因 吕 网 站 推广 : 充分 利用 搜索 引擎 和 发 布 广告 的 方式 对 网 站 进行 宣 

制作 网 站 的 最 后 一 步 是 维护 。 和 传统 产品 一 样 ， 设 计 师 也 需要 做 一 些 售后 服务 的 工作 ， 
也 就 是 对 网 站 进行 定期 维护 。 
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&7)) 1.2 ”Web 标准 布局 介绍 


无 论 做 什么 事情 都 需要 遵循 一 定 的 标准 和 规则 ， 设 计 网 页 同样 如 此 。 随 着 网 络 技术 的 飞 
速 发 展 ， 各 种 应 用 类 型 的 站 点 纷纷 建立 。 因 为 网 络 的 无 限 性 和 共享 性 ， 以 及 各 种 设计 软件 的 
推出 ， 多 样 化 的 站 点 展示 方式 不 断 涌现 。 为 保证 设计 的 站 点 信息 能 完整 地 展现 在 用 户 面前 ， 
Web 标准 技术 便 应 运 而 生 。 


叫 ) 1.2.1 当前 的 Web 开发 标准 


Web 标准 是 所 有 站 点 在 建设 时 必须 遵循 的 一 系列 硬性 规范 。 从 页 面 构成 来 看 ， 网 页 主要 
由 三 部 分 组 成 : 结构 (Structure) 、 表 现 〈Presentation) 和 行为 (Behavior) ， 所 以 对 应 的 
Web 标准 由 以 下 三 方面 构成 。 
(1) 结构 化 标准 语言 。 
当前 使 用 的 结构 化 标准 语言 是 HIML 和 XHTML， 下 面 将 对 这 两 种 语言 进行 简要 介绍 。 
HTML 是 构成 Web 页 面 的 主要 工具 ， 是 用 来 表示 网 上 信息 的 符号 标记 语言 。 将 需要 表达 
的 信息 按 某 种 规则 写成 HTML 文件 ， 通 过 专用 的 浏览 器 将 这 些 HTML 代码 翻译 成 可 以 识别 
的 信息 ， 就 是 所 见 到 的 网 页 。HIML 语言 是 制作 网 页 的 基础 ， 是 初学 者 必须 掌握 的 内 容 。 当 
前 的 最 新 版 本 是 HIMLS 。 
XHTML 是 根据 XML 标准 建立 的 标识 语言 ， 是 一 种 由 HIML 向 XML 过 渡 的 语言 。 
(2) 表现 性 标准 语言 。 
目前 网 页 的 表现 性 语言 是 CSS (Cascading Style Sheets， 层 替 样 式 表 ) ， 当 前 最 新 的 CSS 
规范 是 CSS3。 通 过 CSS 可 以 对 网 页 进行 布局 ， 控 制 网 页 的 表现 形式 。CSS 可 以 与 XHTML 
语言 相 结 合 ， 实 现 页 面 表现 和 结构 的 完整 分 离 ， 提 高 站 点 的 实用 性 和 维护 效率 。 
(3) 行为 标准 。 
当前 网 页 的 行为 标准 是 DOM (Document Object Model， 文 档 对 象 模型 ) 和 
ECMAScript。 根 据 W3C DOM 规范 ，DOM 是 一 种 与 浏览 器 、 平 台 和 语言 相关 的 接口 ， 使 
得 用 户 可 以 访问 页 面 其 他 的 标准 组 件 。DOM 解决 了 Netscaped 的 JavaScript 和 Microsoft 的 
JavaScript 之 间 的 冲突 。 为 Web 设计 师 和 开发 者 提供 了 一 个 标准 的 方法 ， 让 他 们 来 访问 自己 
站 点 中 的 数据 、 脚 本 和 表现 层 对 象 。 从 本 质 上 讲 ，DOM 是 一 种 文档 对 象 模型 ， 是 建立 在 网 
页 和 Script 及 程序 语言 之 间 的 桥梁 。 
上 述 标准 大 部 分 由 W3C 组 织 起 草 和 发 布 ， 也 有 一 些 是 其 他 标准 组 织 制定 的 标准 ， 比 如 
ECMA 的 ECMAScript 标准 。 


te i 


ECMAScript 是 ECMA (European Computer Manufacturers Association) 制定 的 标准 脚本 语言 | 
| 
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| (JavaScript) 。 


叫 ) 1.2.2 为 什么 使 用 Web 标准 

Web 标准 就 是 网 页 业界 的 ISO 标准 ， 推 出 Web 标准 的 主要 目的 是 让 各 种 技术 都 遵循 这 个 
规范 来 设计 、 制 作 并 发 展 ， 这 样 所 有 的 站 点 才能 以 完整 、 标 准 的 格式 展现 出 来 。 具 体 来 说 ， 
使 用 Web 标准 的 主要 目的 如 下 。 
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。 提供 最 多 利益 给 最 多 的 网 站 用 户 ， 包 | 。。。 用 户 能 够 通过 样式 选择 定制 自己 的 表 
括 世界 各 地 的 用 户 。 现 界面 。 

。 保证 任何 网 站 文档 都 能 够 长 期 有 效 ， ， 。。 。 使 文件 的 下 载 与 页 面 显示 速度 更 快 。 
不 必 在 软件 升级 后 进行 修改 。 使 用 Web 标准 后 ， 不 仅 可 以 为 浏览 用 户 带 


@ 可 以 大 大 简化 代码 , 降低 站 点 建设 成 本 。 | 来 多 元 化 的 浏览 展示 ， 而 且 可 以 为 站 点 拥有 者 
@ 让 网 站 更 容易 使 用 ， 能 适应 更 多 的 不 : 和 维护 人 员 带 来 极 大 的 方便 。 具 体 意义 如 下 。 


同 用 户 和 更 多 的 网 络 设备 。 因 为 硬件 ; e ”带宽 要 求 降低 ， 降 低 了 站 点 成 本 。 
制造 商 也 按照 此 标准 推出 自己 的 产品 。 : e 使 用 更 少 的 代码 和 组 件 ， 使 站 点 更 加 
e 当 浏 览 器 版 本 更 新 ， 或 者 出 现 新 的 网 容易 维护 。 
络 交互 设备 时 ， 可 以 确保 所 有 应 用 能 : e 更 容易 被 搜索 引擎 搜索 到 。 
够 继续 正确 执行 。 | @ 使 改版 工作 更 加 方便 ， 不 再 需要 变动 
使 用 Web 标准 后 ， 对 浏览 用 户 的 具体 意 页 面 内容 。 
义 如 下 。 | e 能 够 直接 提供 打印 版 本 ， 不 需要 另行 
e 页 面 内 容 可 以 被 更 多 的 用 户 所 访问 。 复制 打印 内 容 。 
e 页 面 内 容 能 被 更 广泛 的 设备 所 访问 。 | e 大 大 提高 了 站 点 的 易 用 性 。 


叫 ) 1.2.3 ”CSS 布局 标准 


作为 一 个 站 点 页 面 设计 人 员 ， 必 须 严 格 遵循 前 面 介 绍 的 标准 ， 使 页 面 完美 地 展现 在 用 户 
面前 。 在 推出 Web 标准 以 前 ， 站 点 网 页 是 用 <table> 元 素来 布局 的 。 从 本 质 上 看 来 ， 传 统 的 
<table> 元 素 布局 和 现在 的 CSS 布局 所 遵循 的 是 截然 不 同 的 思维 模式 。 下 面 将 介绍 传统 布局 
和 CSS 布局 的 区 别 ， 并 着 重 说 明 标准 布局 的 重要 意义 。 

伍 传统 页 面 布局 
传统 的 页 面 布局 方法 是 使 用 表格 元 素 <table>， 具 体 实现 方法 如 下 。 
(1) 使 用 <table> 元 素 的 单元 格 根据 需要 将 页 面 划分 为 不 同 区 域 ， 并 且 在 划分 后 的 单元 
格 内 可 以 继续 嵌 套 其 他 的 表格 内 容 。 
(2) 利用 <table> 元 素 的 属性 来 控制 内 容 的 具体 位 置 ， 如 algin 和 valgin 。 
外 标准 布局 

在 Web 标准 布局 的 页 面 中 ， 表 现 部 分 和 结构 部 分 是 各 自 独立 的 。 结 构 部 分 是 用 HTML 
或 XHTML 编写 的 ， 而 表现 部 分 是 用 可 以 调用 的 CSS 文件 实现 的 。 这 样 ， 实 现 了 页 面 结 构 和 
表现 内 容 的 分 离 ， 方 便 了 页 面 维护 。 例 如 ， 下 面 的 代码 使 用 了 标准 布局 。 
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<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title> 无 标题 文档 </title> 
<link href="style.css" type="text/css" rel="stylesheet"/> <!-- 调用 样式 代码 -> 
</head> 
<body> 
<table width="600" height="200" border="0" align="center"> 
<tr><td><div class="unnamed1"> 语文 </div></td></tr> <!-- 使 用 样式 --> 
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<tr><td><div class="unnamed1"> 数学 </div></td></tr> 
<tr><td><div class="unnamed1"> 英语 </div></td></tr> 
<tr><td><div class="unnamed1"> 体育 </div></td></tr> 
<tr><td><div class="unnamed1"> 德育 </div></td></tr> 
</table> 
</body> 
</html> 
style.css 文件 的 具体 代码 如 下 。 | 个 站 点 的 此 属性 元 素 都 会 被 修改 。 
: 所 以 说 使 用 标准 样式 后 ， 实 现 页 面 结构 
和 表现 的 分 离 ， 对 站 点 设计 具有 重大 意义 。 
要 体现 在 以 下 几 个 方面 。 
e 由 于 页 面 的 表现 部 分 由 样式 文件 独立 
控制 ， 所 以 使 站 点 的 改版 工作 变 得 更 
加 轻松 自如 。 
e@ 由 于 页 面 内 容 可 以 使 用 不 同 的 样式 文 
件 ， 所 以 使 页 面 内 容 能 够 完全 适应 各 


.unnamed1{ 


background-position: center; 


text-align:center; 


color:#CCOOOO; 
} 


从 上 述 演示 代码 中 可 以 清楚 地 看 出 ， 使 


用 CSS 标准 样式 后 ， 结 构 部 分 和 表现 部 分 已 5 eco 网 XHTML 的 清晰 结构 ， 
经 完全 分 离 了 。 如 果 想 继续 修改 文字 的 颜色 实现 建议 的 数据 处 理 。 

为 green， 则 只 需 对 CSS 文件 中 的 color 值 进 @ 可 以 根据 XHTML 的 明确 语意 ， 轻 松 
行 修改 。 如 果 整 个 站 点 的 页 面 都 调用 此 CS 实现 搜索 工作 。 


文件 ， 则 只 需 改变 此 样式 的 某 个 属性 值 ， 整 
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07) 1.3 HTML 与 HTML5 


HTML 的 全 称 是 HyperText Markup Language〈 超 文本 标记 语言 ) ， 它 是 互联 网 上 应 用 
最 广泛 的 标记 语言 。 注 意 ， 初 学 者 不 要 把 HIML 语言 和 Java、C# 等 编程 语言 混淆 起 来 (把 
HTML 想 得 很 复杂 ) ，HTML 只 是 一 种 标记 语言 。 简 单 地 说 ，HTML 文件 就 是 普通 文本 加 上 
HTML 标记 ， 只 是 不 同 的 标记 能 表示 不 同 的 效果 。 


咱 》1.3.1 HTML 的 发 展 历史 


HTML 自 诞 生 以 来 就 显得 “很 不 正规 ”， 因 为 1991 年 年 底 推出 的 HIML， 作 为 最 早 的 
HTML 并 没有 任何 严格 的 定义 。 直 到 1993 年 ，IETF (Internet Enginnering Task Force， 互 联 
网 工程 工作 小 组 ) 才 发 布 HTML 规范 的 草案 。 在 HTML 语言 的 发 展 历史 中 ， 主 要 经 历 了 以 
下 版 本 。 

@ HTML 1.0: 1993 年 6 月 由 IETF 发 布 第 一 个 HTML 工作 草案 。 

HTML 2.0: 1995 年 11 月 作为 RFC 1866 发 布 。 

HTML 3.2: 1996 年 1 月 由 W3C 组 织 发 布 ， 是 HIML 文档 第 一 个 被 广泛 使 用 的 标准 。 
HTML 4.0: 1997 年 12 月 由 W3C 组 织 发 布 ， 也 是 W3C 推荐 标准 。 

HTML 4.01: 1999 年 由 W3C 组 织 发 布 ， 是 HIML 文档 另 一 个 重要 的 广泛 使 用 的 
标准 。 
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e XHTML 1.0: 发 布 于 2000 年 1 月 , 是 | 致 HIML 显得 极为 混乱 。 例 如 ， 下 面 是 一 段 
W3C 组 织 推荐 标准 ， 后 来 经 过 修订 于 ; HTML 代码 。 
2002 年 8 月 重新 发 布 。 

在 HIML 3.2 以 前 ，HTML 的 发 展 极为 


<ol> 


混乱 ， 各 软件 厂商 经 常 自行 增加 HIML 相 <I> 语文 
记 , 而 各 浏览 器 厂商 为 了 保持 最 好 的 兼容 性 ， <i> 数学 
总 是 尽力 支持 各 种 HTML 标记 。 在 HIML <li> 英语 
发 展 历史 上 ， 广 为 人 知 的 就 是 HIML 3.2 和 ES 


HIML 4.01。 

在 早期 的 HIML 发 展 历史 中 ， 由 了 
HTML 从 未 执行 严格 的 规范 ， 而 且 各 浏览 器 
对 各 种 错误 的 HIML 极为 “宽容 ”， 这 就 导 | 


虽然 上 面 是 一 段 极 不 规范 的 HIML 代 
码 ， 但 是 随便 使 用 任何 浏览 器 来 浏览 它 ， 都 
会 看 到 一 个 “有 序列 表 ” 的 效果 ， 如 图 1-4 


i 所 示 。 


© 下 CNUsersAdministratonDes 只 ~ 
局 CNUsersWwdministrator\-，X 


图 1-4 Chrome 和 正中 浏览 HTML 的 效果 
从 图 1-4 中 可 以 看 出 ，<ol> 标记 和 <li> 标记 在 浏览 器 中 可 以 呈现 特定 效果 ， 这 就 是 
HTML 文档 的 作用 。 通 过 在 文本 文件 中 嵌入 HTML 标记 , 这 些 标记 告诉 浏览 器 如 何 显示 页 面 ， 
从 而 使 HTML 文件 呈现 出 丰富 的 表现 效果 。 
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| 修改 HTML 文档 内 容 后 ， 浏 览 器 并 不 会 自动 更 新 该 文档 的 显示 ， 我 们 必须 用 浏览 器 重新 打 | 
开 该 文档 ， 或 者 通过 浏览 器 的 刷新 功能 重新 加 载 该 文档 ， 这 样 浏览 器 才 会 显示 HTML 文档 的 最 
新 改变 。 | 


串 ) 1.3.2 HTML 4.01 和 XHTML 


XHTML 的 全 称 是 eXtensible HyperText Markup Language (可 扩展 的 超 文 本 标记 语言 ) ， 
XHTML 和 HTML 4.01 具有 很 好 的 兼容 性 ， 而 且 XHTML 具有 更 严格 、 更 纯净 的 HIML 代码 。 
前 面 介绍 过 ， 由 于 HIML 已 经 发 展 到 极度 混乱 的 程度 ， 所 以 W3C 组 织 制 定 了 XHTML。 它 
的 目标 是 逐步 取代 原 有 的 HIML， 也 就 是 说 XHTML 是 最 新 版 的 HIML 规范 。 

我 们 习惯 上 认为 HTML 是 一 种 结构 化 的 文档 , 但 实际 上 HTML 的 语法 非常 自由 、 
要 是 各 浏览 器 纵容 的 结果 ) ， 所 以 如 下 的 HTML 代码 也 是 正确 的 。 


容 ( 主 


Ei 


<html> 
<head> 
<title> 混乱 的 HTML 文档 </title> 
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<body> 
<h3> 混乱 的 HTML 文档 


在 上 述 代码 中 有 4 个 标签 没有 正确 结束 ， 这 显然 违背 了 HIML 结构 化 文档 的 规则 。 但 
是 使 用 浏览 器 来 浏览 该 文档 时 ， 依 然 可 以 看 到 正确 的 结果 ， 这 就 是 HIML 不 规范 的 地 方 。 而 
XHTML 致力 于 消除 这 种 不 规范 ，XHTML 要 求 HIML 文档 首先 必须 是 一 份 XML 文档 ， 即 
一 个 XHTML 文档 要 满足 XML 的 以 下 4 个 基本 规则 。 
e ”整个 文档 有 且 只 有 一 个 根 元 素 。 
® 每 个 元 素 都 由 开始 标签 和 结束 标签 组 成 ( 例如 <h2> 是 开始 标签 ，</h2> 是 结束 标签 )， 除 
非 使 用 非 空 元 素 语法 ( 例如 ，<br/> 元 素 就 是 空 元 素 语 法 )。 
e 元 素 与 元 素 之 间 应 该 合理 谋 套 。 例 如 ，“<p><h2> 规范 的 文档 结构 </h2></p>” 可 以 很 明 
显 地 看 出 h2 元 素 是 p 元 素 的 子 元 素 ， 这 就 是 合理 族 套 ; 但 是 像 “<p><h2> 规范 的 文档 结 
构 </p></h2>” 这 种 写法 就 是 不 合理 谋 套 。 
e 元 素 的 属性 必须 有 属性 值 ， 而 且 属性 值 应 该 使 用 引号 ( 可 以 是 单 引 号 或 者 双 引 号 ) 括 
通常 ， 客 户 端的 浏览 器 可 以 很 好 地 处 理 各 种 不 规范 的 HIML 文档 。 但 是 运行 在 移动 端的 
浏览 器 就 没有 足够 的 能 力 来 处 理 这 些 糟糕 的 标记 结构 。 为 此 ，W3C 建议 使 用 XML 规范 来 约 
束 HIML 文档 , 将 HTML 和 XML 的 长 处 加 以 整合 ， 从 而 得 到 现在 看 到 的 XHTML 标记 语言 。 
XHTML 可 以 被 所 有 支持 XML 的 设备 读 取 ， 在 其 他 浏览 器 升级 到 支持 XML 之 前 ， 
XHTML 强制 HIML 文档 具有 更 加 良好 的 结构 ， 从 而 保证 这 些 文档 可 以 被 所 有 的 浏览 
解释 执行 。 


叫 ) 1.3.3 HTML 和 XHTML 文档 类 型 定义 


从 表面 上 看 ，HIML 和 XHTML 显得 杂乱 无 章 ， 但 实际 上 W3C 为 HTML 和 XHTML 制 
定 了 严格 的 语义 结构 。W3C 组 织 使 用 DID (Document Type Definition， 文 档 类 型 定义 ) 来 定 
义 HIML 和 XHTML 的 语义 结构 ， 包 括 HIML 文档 中 可 以 出 现 哪些 元 素 ， 各 元 素 支持 哪些 
属性 等 。 
【 例 1-1】 
打开 HTML 4.01 的 DTD 文档 http://www.w3.org/TR/html401/loose.dtd， 在 该 文档 中 可 以 
看 到 以 下 代码 片段 。 
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<!ELEMENT BODY O O (%flow;)* +(INS|DEL) -- document body --> 
<IATTLIST BODY 


%attrs; — %coreattrs, %il8n, %events -- 

onload %Script; #IMPLIED -the document has been loaded -- 

onunload %Script; #IMPLIED -the document has been removed -- 

background %URI; #IMPLIED — texture tile for document 
background -- 

%bodycolors; — bgcolor, text, link, vlink, alink — 


> 


这 段 DTD 代码 定义 了 BODY 元 素 可 以 支持 %attrs 指定 的 各 种 通用 属性 ， 除 此 之 外 ，BODY 
元 素 还 可 以 指定 onload、onunload、background、bgcolor、text、link、vlink 和 alink 这 些 属性 。 


9 力 


fa 
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在 HIML 语言 中 经 常会 把 元 素 称 为 标签 ， 但 实际 上 按 标 准 说 法 应 该 称 为 元 素 。 例 如 ， 例 1-1 | 
| 的 DTD 片段 使 用 ELEMENT 来 定义 BODY 元 素 〈 不 区 分 大 小 写 ) 。 1 


BODY 元 素 能 接受 的 子 元 素 由 %flow 来 决定 ， 它 是 一 个 参数 实体 引用 。%flow 参数 的 实 
体 定义 如 下 : 
<!ENTITY %flow "%block; | %inline;"> 


其 中 ，%block 也 是 一 个 参数 实体 引用 ， 它 代表 换行 “ 块 模型 ”的 HTML 元 素 。%block 
参数 的 实体 定义 如 下 : 


<!IENTITY % block 
"P | %heading; | %list; | %preformatted; | DL | DIV | CENTER | 
NOSCRIPT | NOFRAMES | BLOCKQUOTE | FORM | ISINDEX | HR | 
TABLE | FIELDSET | ADDRESS"> 


其 中 , %inline 也 是 一 个 参数 实体 引用 , 它 代 表 不 换行 “内 联 模型 ”的 HTML 元 素 。%inline 
参数 的 实体 定义 如 下 : 


<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;"> 


【 例 1-2] | BE #MPLIED 
用 http:/www.w3.org/TR/xhtmll/DTD/ : Pee %Color; #IMPLIED 
xhtmll-transitional.dtd 地 址 打开 XHTML 1.0 ; ji Color; #IMPLIED 
的 DID 文 档 ， 在 该 文档 中 可 以 看 到 以 下 | vlink %Color; 失 MPLIED 
BODY 元 素 的 定义 代码 : | alink %Color; #IMPLIED 
<!ELEMENT body %Flow;> : z 
ST OY | 上述 DTD 代码 同样 定义 了 BODY 元 素 
ty | 可 以 包含 哪些 子 元 素 ，BODY 元 素 除了 支 
onload %Script; #IMPLIED | 持 %attrs 指定 的 各 种 通用 属性 外 ， 还 可 以 指 
0 day | 定 onload、onunload、background、bgcolor、 
background %URI; #IMPLIED | text、link、vlink 和 alink 这 些 属性 。 


BODY 元 素 可 包含 的 子 元 素 由 %flow 参数 实体 引用 定义 ，%flow 参数 的 实体 定义 如 下 : 
<!IENTITY % flow "(#PCDATA | %block; | form | %inline; | %misc;)*"> 


通过 对 比例 1-1 和 例 1-2 不 难 发 现 ，HTML 4.01 与 XHTML 基本 相似 ， 只 是 HIML 4.01 
允许 元 素 使 用 大 写字 母 ， 而 XHTML 则 要 求 所 有 元 素 、 属 性 都 必须 是 小 写字 母 。 

无 论 是 HIML 4.01 还 是 XHTML， 它 们 都 以 DID 作为 语义 结束 。 也 就 是 说 ， 它 们 都 有 
严格 的 规范 标准 ， 但 实际 上 很 少 有 页 面 完 全 遵守 HIML 1.0 或 者 XHTML 规范 。 在 这 样 的 背 
景 下 ，WHATWG (Web Hypertext Application Technology Working Group，Web 超 文本 应 用 技 
术 工 作 组 ) 制定 了 一 个 新 的 HIML 标准 一 一 HTML5。 


第 1 章 初步 认识 HIMLS 和 CSS3 
oY 


串 ) 1.3.4 从 XHTML 到 HTML5 


虽然 W3C 努力 为 HIML 制定 规范 ， 但 由 于 绝 大 部 分 编写 HTML 页 面 的 人 员 并 没有 受过 
专业 训练 ， 他 们 对 HIML 规范 、XHTML 规范 也 不 甚 了 解 ， 所 以 他 们 制作 的 HIML 网 页 绝 大 
部 分 都 没有 遵守 HIML 规范 。 大 量 调查 表明 ， 即 使 在 一 些 比 较 正 规 的 网 站 中 ， 也 很 少 有 网 站 
能 通过 HIML 规范 验证 。 

尽管 互联 网 上 绝 大 部 分 HIML 页 面 都 不 符合 规范 ， 但 各 种 浏览 器 却 可 以 正常 解析 、 显 示 
这 些 页 面 ， 在 这 样 的 局 面 下 ，HTML 页 面 的 开发 者 甚至 感觉 不 到 遵守 HIML 规范 的 意义 。 于 
是 出 现 了 一 种 尴 砍 的 局 面 : 一 方面 , W3C 组 织 努 力 呼 吁 大 家 应 该 制作 符合 规范 的 HIML 页 面 ; 
另 一 方面 , HIML 开发 者 根本 不 理会 这 种 呼吁 (因为 浏览 器 为 不 规范 的 HTML 页 面 做 了 处 理 ， 
使 其 能 正常 显示 )。 

现 有 的 HIML 页 面 大 量 存 在 以 下 4 种 不 符合 规范 的 内 容 。 

e@ 元 素 标 签 大 小 写 混杂 。 例 如 <span>Hello</SpAn>， 这 里 的 结束 标签 与 开始 标签 大 小 写 不 

匹配 。 

® 元 素 没 有 合理 结束 。 例 如 ， 只 有 开始 标签 没有 结束 标签 。 

e@ 元 素 中 使 用 了 属性 ， 但 没有 指定 属性 值 。 例 如 ，<input type='text disabled>。 

® 为 元 素 的 属性 指定 值 时 未 加 引号 。 例 如 ，<input type=text >。 

可 能 是 出 于 “存在 即 是 合理 ”的 考虑 , WHATWG 组 织 开始 制定 一 种 “妥协 式 ” 的 规范 一 一 
HIML5。 既 然 互 联网 上 大 量 存在 上 面 4 种 不 符合 规范 的 内 容 ， 而 且 制 作者 很 少 遵守 这 些 规范 ， 
因此 HIMLS 干脆 承认 它们 是 符合 规范 的 。 

由 于 HTML5 规范 十 分 宽松 ， 因 此 HTML5 甚至 不 再 提供 文档 类 型 定义 。 到 2008 年 
WHATWG 的 努力 终于 被 W3C 认可 ，W3C 已 经 制定 了 HIMLS 草案 。 


叫 ) 1.3.5 HTML5 的 优势 


从 HIML 4.01、XHTML 到 HIML5， 并 不 是 一 种 革命 性 的 升级 ， 而 是 一 种 规范 向 习惯 的 
妥协 。 因 此 ， 一 方面 ，HIMLS 并 不 会 带 给 开发 人 员 过 多 的 冲击 ， 他 们 从 HIML 4.01 过 渡 到 
HIML5 非常 轻松 。 另 一 方面 ，HTMLS5 增加 了 很 多 非常 实用 的 新 功能 ， 这 些 新 功能 将 吸引 开 
发 人 员 投 入 HIMLS 的 怀抱 。 

项 区 解决 跨 浏览 器 问题 

对 具有 实际 开发 经 验 的 前 端 开 发 人 员 来 说 ， 跨 浏览 器 问题 绝对 是 一 个 永恒 的 “ 豆 梦 ”。 
明明 在 一 个 浏览 器 上 可 以 正常 运行 的 HIML+CSS+JavaScript 页 面 ， 换 一 个 浏览 器 就 会 出 
现 很 多 问题 ， 如 页 面 布 局 错乱 ，JavaScript 运行 出 错 等 。 因 此 ， 很 多 前 端 开 发 人 员 在 开发 
HIML+CSS+JavaScript 页 面 时 ， 往往 会 先 判断 客户 端 浏览 器 ， 然后 根据 不 同 浏览 器 编写 不 同 
的 页 面 代 码 。 

HTML5 的 出 现 可 能 会 改变 这 种 局 面 ， 目 前 各 种 主流 浏览 器 ， 如 Intemet Explorer、 
Firefox、Safari、Chrome 和 Opera， 都 表现 出 对 HIMLS 的 极 大 支持 。 

® Internet Explorer 2010 年 3 月 ， 微 软 宣布 从 Internet Explorer 9 开始 全 面 支持 HIMLS、 

CSS3 和 SVG 等 新 规范 。 

®@ Chrome Google 一 直 以 来 都 在 积极 推动 HIMLS 的 发 展 。 

e@ Firefox 从 Firefox 4 开始 一 直 积极 支持 HIML5 的 规范 , 包括 全 新 的 HIMLS 语法 分 析 、 

视频 和 音频 播放 等 。 

@ Opera 从 Opera 10 开始 每 一 次 版 本 升级 都 支持 最 全 的 HTMLS5 规范 。 
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© Safari 


播放 等 。 


从 Safari 5 开始 全 面 支 持 HTML5 规范 ， 


如 HIML5 拖 放 、 视 频 和 音频 


在 HTML5 以 前 ， 各 浏览 器 对 HIML、JavaScript 的 支持 很 不 统一 ， 同 一 个 页 面 在 不 同 浏 
览 器 中 的 表现 不 同 。HTMLS5 的 目标 是 详细 分 析 各 浏览 器 所 具有 的 功能 ， 以 此 为 基础 制定 一 
个 通用 规范 ， 并 要 求 各 浏览 器 厂家 能 支持 这 个 通用 标准 。 目 前 来 看 ， 除 Internet Explorer 的 兼 


容 性 较 弱 之 外 ， 其 
人 钱 部 分 代替 原来 的 JavaScript 


他 浏览 器 都 能 统一 地 遵守 HIMLS 规范 。 


HTMLS 增加 了 一 些 非 常 实用 的 功能 ， 这 些 功能 有 的 可 以 部 分 代替 JavaScript， 使 用 这 些 


功能 只 需要 为 标签 增加 一 些 属 性 即 可 。 
【 例 1-3】 


假设 要 在 页 面 打 开 之 后 立即 让 一 个 单行 文本 框 获取 输入 焦点 。 在 HIML5 以 前 ， 可 能 需 


要 借助 JavaScript 来 实现 ， 示 例 代码 如 下 : 


姓名 : <input type="text" name="name" id="name"/><br/> 


年 龄 ，<input type="text" name="age" id="age"/><br/> 


<script type="text/javascript"> 
document.getElementByld('name').focus(); 


</script> 


如 果 使 用 HIML5， 则 只 需要 为 单行 文本 框 添加 autofocus 


属性 即 可 。 修 改 后 的 代码 如 下 : 


姓名 : <input type="text" name="name" id="name"/><br/> 
年 龄 :<input type="text" name="age" id="age" autofocus/><br/> 


对 比 上 面 两 段 代码 ， 不 难 发 现 使 用 HTML5 之 后 代码 要 简洁 很 多 。 除 了 这 里 介绍 的 可 用 
属性 之 外 ，HIMLS 还 支持 其 他 一 些 属性 ， 如 输入 校 验 ， 以 前 必 


于 自动 获得 焦点 的 autofocus 


须 通过 JavaScript 来 实现 ， 现 在 只 需要 一 个 HIML5S 属性 即 可 。 


俩 区 更 明确 的 语义 结构 


在 HTML5 以 前 ， 如 果 要 定义 一 个 文档 | 


块 结构 只 能 通过 div 元 素来 实现 。 如 下 是 一 
个 文档 块 的 典型 结构 。 


<div id="header"></div> 
<div id="nav"></div> 
<div id="article"> 
<div id="section"></div> 
</div> 
<div id="aside"></div> 


<div id="footer"></div> 


在 上 面 的 块 结构 中 ， 所 有 的 块 元 素 都 采 


用 div 元 素来 实现 。 通 过 为 不 同 的 div 元 素 设 ; 


置 不 


同 的 id 来 表示 不 同 的 含义 。 由 于 整个 代 


码 全 部 是 div 元 素 , 导致 缺乏 明确 的 语义 元 素 ， 
对 搜索 引擎 和 移动 设备 支持 也 不 友好 。 
HIMLS 为 页 面 布局 提供 了 更 加 明确 的 语 


义 元 素 。 如 下 是 使 用 HIMLS 后 的 页 面 结构 。 
<header></header> 
<nav></nav> 
<article> 


<section></section> 
</article> 
<aside></aside> 


<footer></footer> 
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通过 对 比 不 难 发 现 ， 应 用 HTML5 后 页 面 结构 变 得 更 加 清晰 ， 语 义 也 更 明确 。 除 此 之 外 ， 
以 前 的 HIML 中 会 使 用 em 元 素 表 示 “ 被 强调 ”的 内 容 ， 但 内 容 是 哪 一 种 强调 em 元 素 却 无 
法 表达 。 在 HTML5 则 提供 了 更 多 的 语义 强调 元 素 ， 如 time 元 素 用 于 强调 被 标记 的 内 容 是 日 
期 或 时 间 ，mark 元 素 用 于 强调 被 标记 的 文本 等 。 


区 区 增强 Web 应 用 程序 的 功能 


一 直 以 来 ，HTML 页 面 的 功能 都 被 限制 了 。 客 户 端 从 服务 器 下 载 HTML 页 面 数据 ， 浏 
览 器 负责 呈现 这 些 HTML 页 面 数据 。 出 于 对 客户 端 安全 性 的 考虑 ， 以 前 的 HTML 在 安全 
性 方面 确实 做 得 足够 安全 。 这 样 一 来 ， 我 们 必须 通过 JavaScript 或 者 插件 等 其 他 方式 来 增加 
HTML 的 功能 。 换 句 话 来 说 ，HTML 对 Web 程序 而 言 功能 太 单薄 了 ， 比 如 上 传 文件 时 想 同时 
选择 多 个 文件 都 不 行 。 为 了 弥补 这 些 不 足 ，HIMLS 规范 增加 了 很 多 新 的 API， 各 种 浏览 器 正 
在 努力 实现 这 些 API 功能 ， 因 此 使 用 HTMLS5 开发 Web 应 用 将 会 更 加 轻松 。 


7) 1.4 ”HTML5 语法 的 变化 


众所周知 ，HTMLS5 并 不 是 对 HIML4 和 XHTML 的 革命 性 升级 ， 也 就 是 说 原来 的 HTML 
页 面 和 XHTML 页 面 同样 可 用 。 下 面 分 别 从 DOCTYPE 声明 、 命 名 空间 声明 、 编 码 类 型 和 文 
档 媒体 类 型 等 几 个 方面 介绍 HTML5 的 语法 。 


叫 )》 1.4.1 DOCTYPE 声明 


HTML5 的 HIML 语法 要 求 文档 必须 声明 DOCTYPE， 以 确保 浏览 器 可 以 在 标准 模式 下 
展示 页 面 。HTML 早期 版 本 的 声明 ，HTML 是 建立 在 SGML 基础 上 的 ， 因 此 通过 DOCTYPE 
声明 时 需要 关联 引用 一 个 相对 应 的 DID。 

HTML 4.01 版 本 的 DOCTYPE 声明 如 下 : 
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<IDOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
XHTML 版 本 的 DOCTYPE 声明 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN” 
"http://www.w3.org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 


HIML5S 和 之 前 的 版 本 不 一 样 ， 它 仅仅 需要 用 DOCTYPE 声明 就 可 以 告诉 文档 启用 的 是 
HTML5 语法 标准 ， 浏 览 器 会 为 其 做 剩余 工作 。HIML5 中 DOCTYPE 的 声明 代码 如 下 : 


<!IDOCTYPE html> 


叫 ) 1.4.2 命名 空间 声明 
HTML5 不 需要 再 像 HTML4 中 那样 为 html 元 素 添加 命名 空间 。 例 如 ， 在 HTML4 中 声 
明 html 元 素 时 的 代码 如 下 : 


<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn"> 


HTMLS+CS553+JavaScript 网 页 设计 入 门 与 应 用 
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HTML4 中 的 xmlns 属性 在 XHTML 中 是 必需 的 ， 它 没有 任何 实际 效果 ， 但 是 出 于 验证 
的 原因 ， 在 把 HIML 转换 为 XHTML 的 过 程 中 是 很 有 帮助 的 。 在 HTML5 中 没有 理由 这 么 做 ， 
但 是 仍然 可 以 定义 此 属性 的 值 ， 并 且 此 属性 的 值 只 有 一 个 。HTMLS5 可 以 直接 通过 以 下 代码 
声明 文档 。 


<html lang="zh-cn"> 


另外 ，HTMLS 新 增加 了 一 个 名 称 为 manifest 的 属性 ， 此 属性 的 值 指向 一 个 URL 地 址 ， 
表示 脱 机 使 用 时 定义 的 缓存 信息 。 
咱 ) 1.4.3 ”编码 类 型 

HTML4 需要 使 用 <meta> 标记 指定 文件 中 的 编码 类 型 ， 代 码 如 下 ; 


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 


从 HTML5 开始 ， 对 于 文档 的 编码 类 型 推荐 使 用 UTF-8， 而 且 HTMLS5 可 以 直接 通过 为 
<meta> 标记 追加 charset 属性 的 方式 来 指定 字符 编码 ， 代 码 如 下 : 


<meta charset="UTF-8" /> 


HTML5 也 可 以 使 用 HTML4 的 编码 方式 ， 上 述 两 种 方式 都 有 效 ， 但 是 它们 不 能 混合 使 用 。 
例如 ， 下 面 这 种 编码 方式 就 是 错误 的 。 


<meta charset="UTF-8" http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 


虽然 HTML5 兼容 了 HTML4 的 meta 元 素 的 语法 ,但 是 在 HTMLS5 中 并 不 推荐 使 用 。 如 表 1-1 
所 示 为 HTML4 和 HTMLS5 对 此 标记 属性 的 支持 情况 。 在 该 表 中 ,“ ”表示 此 版 本 支持 某 属性 ， 


而 “x ” 则 表示 不 支持 某 属性 。 
表 1-1 HTML4 和 HTML5 对 <meta> 标记 属性 的 支持 
属 性 值 说 明 HTML4 | HTML5 
charset character/encoding 定义 文档 的 字符 编码 x Vv 
content some text 定义 与 http-equiv 或 name 属性 相关 的 元 信息 | W Vv 
-type/expi 
http-equiv ontont-type oe 把 content 属性 关联 到 HTTP 头 部 vV Vv 
refresh/set-cookie 
author/description/ 
name keywords/generator/ 把 content 属性 关联 到 一 个 名 称 Vv Vv 
revised/others 
scheme some text 定义 用 于 翻译 content 属性 值 的 格式 以 类 
【 例 1-4] 


下 面 分 别 通过 为 <meta> 标记 的 属性 指定 不 同 的 值 来 实现 不 同 的 内 容 设置 。 
硬 友 将 name 属性 的 值 指定 为 keywords， 可 以 定义 针对 搜索 引擎 的 关键 词 ， 代 码 如 下 : 


<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" /> 
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四 加 将 name 属性 的 值 指定 为 description， 可 以 定义 对 页 面 的 描述 ， 代 码 如 下 : 


<meta name="description" content=" 免费 的 web 技术 教程 。" /> 


大 号 将 name 属性 的 值 指 定 为 revised， 可 以 定义 页 面 的 最 新 版 本 ， 代 码 如 下 : 


<meta name="revised" content="David, 2018/8/8/" /> 


轩 妈 设置 http-equiv 属性 的 值 为 refresh， 指 定 每 5 秒 钟 刷 新 一 次 页 面 ， 代 码 如 下 : 


<meta http-equiv="refresh" content="5" /> 


咱 ) 1.4.4 文档 媒体 类 型 . 
HTML5 定义 的 HTML 语法 大 部 分 兼容 ， 
HTML4 和 XHTML1， 但 是 也 有 一 部 分 不 兼 | 
容 。 大 多 数 HTIML 文档 都 是 保存 为 “text | 
html” 媒 体 类 型 。HTML5 为 HTML 语法 定 
义 了 详细 的 解析 规则 (包括 错误 处 理 ) ， 用 | 
户 必须 遵守 这 些 规则 将 它 保存 为 “texthtml” 
媒体 类 型 。 
【 例 1-5] 
下 面 的 代码 是 一 个 符合 HTMLS5 语法 规 | 
范 的 例子 。 


<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Example document</title> 
</head> 
<body> 
<p>Example paragraph</p> 
</body> 
</html> 


HTML5 为 HTML 语法 定义 了 一 个 “text/ ; 


川 ) 1.4.5 HTML5 兼容 HTML 


html-standboxed” 媒 体 类 型 ， 以 便 可 以 管理 
不 信任 的 内 容 。 其 他 能 够 用 于 HIMLS 的 语 
法 是 XML， 它 兼容 XHTML1， 使 用 XML 语 


; 法 需要 将 文档 保存 为 XML 媒体 类 型 ， 并 且 


要 根据 XML 的 规范 设置 命名 空间 ， 该 命名 


| 空间 是 http://www.w3.org/1999/xhtml。 


【 例 1-6】 
下 面 的 代码 符合 HTML5 中 的 XML 语法 
规范 ， 需 要 注意 的 是 ，XML 文档 必须 保存 为 


; XML 媒体 类 型 ， 例 如 “applicationxhtmltxml” 
”或 者 “application/xml”， 代 码 如 下 : 


<?xml version="1.0" encoding="UTF-8"?> 
<html xmlns="http://www.w3.org/1999/ 
xhtml"> 
<head> 
<title>Example document</title> 
</head> 
<body> 
<p>Example paragraph</p> 
</body> 
</html> 


HIMLS 的 语法 是 为 了 保证 与 之 前 的 HIML 语法 达到 最 大 限度 的 兼容 而 设计 的 。 例 如 ， 
在 使 用 <p> 标记 时 ， 可 以 不 为 它 添加 结束 标记 ， 这 种 情况 在 HTMLS5 中 也 是 允许 的 ， 不 会 将 


它 当 作 错 误 处 理 ， 


昌 是 明确 规定 了 这 种 情况 如 何 处 理 。 


针对 上 述 问 题 ， 下 面 分 别 从 可 省 略 的 标记 、 具 有 布尔 值 的 属性 和 引号 的 省 略 三 个 方面 介 
绍 HIML5 如 何 确保 与 之 前 版 本 的 HIML 兼容 。 
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全 林涛 酌 交 标记 ; 元 素 可 以 完全 被 忽略 ， 即 使 标记 被 省 略 了 ， 
一 _、 “| 它 还 是 以 隐 式 的 方式 存在 。 例 如 ， 将 body 
久生 居 体 来 郑 分， 本 以 将 re 中 的 旧 证 元素 的 开始 标记 和 结束 标记 都 省 咯 时 ， 它 实 
束 标记 ”和 “开始 标记 与 结束 标记 均 可 省 略 ”| 降 二 还 是 在 文档 中 存在 。 了 IMT 中 Tm 
二 种 类 型 。 下 面 针 对 这 二 种 类 型 列 出 一 个 和 结束 标记 都 可 省 略 的 元 素 包括 : 
法 首 SR es ead、body、colgroup 和 tbody。 


上 月 

(1) 不 允许 写 结束 标记 。 伍 具有 布尔 值 的 属性 

“不 允许 写 结束 标记 ”是 指 不 允许 使 用 布尔 值 是 一 个 逻辑 值 ， 即 真 (tmue) / 假 
开始 标记 与 结束 标记 将 元 素 括 起 来 ， 只 允许 ; (false) 值 ，disabled 和 readonly 属性 的 值 都 
使 用 < 标记 人 的 形式 进行 书写 。 例 如 ，<br> ; 是 布尔 值 。 对 于 具有 布尔 值 的 属性 ， 只 写 属 
不 能 写成 <br></br>， 当 然 HTMLS 也 支持 之 ; 性 而 不 指定 属性 值 时 ， 表 示 属 性 值 为 tue; 
前 的 <br> 这 种 形式 。 0 果 想 要 将 属性 值 设置 为 Blse， 那 么 可 以 不 

HTML 中 不 允许 写 结束 标记 的 元 素 包括 “使 用 该 属性 。 
area、base、br、col、command、embed、 总 体 来 说 ， 如 果 要 将 具有 布尔 值 的 属性 
hr、 img、 input、 keygen、 link、 meta、 秆 设置 为 tue， 有 以 下 四 种 方法 。 
param、 source、track 和 wbr。 e@ 只 写 属性 不 写 属性 值 。 


(2) 可 以 省 略 结束 标记 。 。 将 属性 的 属性 信 指 定 为 true。 

“可 以 省 略 结束 标记 ”是 指 结束 标记 可 e 将 属性 值 指定 为 空 字符 串 。 
有 可 无 ， 可 以 存在 ， 也 可 以 不 存在 。HIM 。 将 属性 值 指定 为 当前 属性 ， 即 属性 值 
中 可 以 省 略 结束 标记 的 元 素 包括 : 1、dt 等 于 属性 名 。 
dd、 p、 rt、 tp、optgroup、option、colgroup、 @ 不 罗列 某 个 属性 ， 即 不 写 某 个 属性 。 
thead、tbody、tfoot、tr、td 和 th。 [ 例 1-7] 


(3) 开始 标记 结 来 标记 均 可 各 略 。 : i 
以 复 选 框 为 例 ， 下 面 分 别 通过 五 种 方式 
始 标记 和 结束 标记 均 可 省 略 ， 指 定 布尔 属性 的 值 。 主 要 代码 如 下 : 
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<!-- 只 写 属 性 不 写 属性 值 ， 结 果 为 true--> 

<input type="checkbox" name="list1" value=" 北京 " checked /> 北京 

<!-- 直接 将 属性 的 值 指定 为 true --> 

<input type="checkbox" name="list1" value=" 云南 " checked="true" /> 云南 
<!-- 属性 值 等 于 属性 名 ， 结 果 为 true --> 

<input type="checkbox" name="list1" value=" 杭州 " checked="checked" /> 杭州 
<!-- 属性 值 等 于 空 字符 串 ， 结 果 为 true -> 

<input type="checkbox" name="list1" value=" 海南 " checked="" /> 海南 

<!-- 不 写 属 性 ， 结 果 为 false --> 

<input type="checkbox" name="list1" value=" 其 他 地 方 " /> 其 他 地 方 


二 引号 的 省 略 | 空格 等 字符 时 ， 属 性 值 两 边 的 引号 可 以 省 略 。 
在 jTML 中 为 冯 性 牛 症 局 性 位 时 ， 凡 入 例如 ， 下 面 几 行 代码 的 效果 是 相同 的 。 
值 两 边 既 可 以 用 双 引 号 ， 也 可 以 用 单 引 号 。 <input type="text" value="abc" /> 
HTMLS 在 此 基础 上 进行 了 更 改 ， 当 属性 值 不 


Sy Eee 上 <input type=password value=abc /> 
包括 空 字符 串 、<、>、=、 单 引号 、 双 引号 和 <input type='radio' value='abc' /> 
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【 例 1-8] 


使 用 前 面 介绍 的 HTMILS 新 语法 创建 第 ， 


一 个 页 面 ， 具 体 步 骤 如 下 。 


gg 新 建 一 个 HIML 页 面 ， 使 用 HIML5 ， 


的 语法 指定 页 面 的 DOCTYPE 声明 。 代码 如 下 : 


<!DOCTYPE html> 


大 芭 使 
并 指定 lang 属性 为 zh-cn。 代 码 如 下 : 


<html lang="zh-cn"> 


轩 指定 当前 页 面 的 字符 集 编码 为 utf-8， 
这 也 是 HIMLS 推荐 的 页 面 编码 。 代 码 如 下 : 


<meta charset="utf-8" /> 


[GD 使 用 title 元 素 将 页 面 的 标题 设置 为 ， 
| 阅 ” 复 选 框 。 代 码 如 下 : 


“HTMLS5 教程 ”。 代 码 如 下 : 


<title> HTML 5 教程 </title> 


加 号 使 | 
教程 ”的 标题 。 代 码 如 下 : 


<h1>HTML 5 教程 </h1> 


.6) 使 


如 下 : 


<ul> 


<li>1，HTML 5 中 最 新 的 鲜 为 人 知 的 酷 特性 


</li> 


Om spE 
全 了 并 < 


HTML 5 教程 


© ti1e:///E:/ETMLS/indes. htnl 


。1. HTL s 中 景 新 的 锌 为 人 知 的 酷 特 性 
。2.HTIL 5 特性 与 技巧 
。3. 细 淡 HDIL 5 新 增 的 元 素 

。4. 名 近 5 技术 概览 


Er 


专题 HTHL 5 下 一 代 Web 开 发 标准 话 解 


回 订阅 
查看 所 有 教程 


图 1-5 Chrome 浏览 器 运行 效果 


hl 元 素 定义 一 个 文字 为 “HIMLS | 


| 个 文本 。 代 码 如 下 ; 


Ul 元 素 创建 一 个 列表 ， 然 后 ; 
向 其 中 添加 一 些 带 有 结束 标记 的 项 。 代 码 ; 
;HTMLS5 新 语法 创建 的 网 页 就 制作 完成 了 ， 接 
; 下 来 需要 打开 支持 HTMLS5 的 浏览 器 进行 测 
; 试 。 图 1-5 为 Chrome 浏览 器 运行 效果 , 图 1-6 
; 为 Firefox 浏览 器 运行 效果 。 


<liz2。HTML 5 新 特性 与 技巧 </li> 
<li>3。 细 谈 HTML 5 新 增 的 元 系 </li> 
<li>z4，HTML5 技术 概览 </li> 

</ul> 


下 创建 一 条 水 平 线 ， 这 里 使 用 <hr/> 


形式 ,因为 该 元 素 不 可 写 结束 标记 。 代 码 如 下 ; 
html 标 记 的 不 带 命名 空间 形式 ，， 


<hr/> 


硬 如 使 用 h4 元 素 定义 一 个 文字 为 “专题 


”HTMLS 下 一 代 Web 开发 标准 详解 ” 的 标题 。 
| 代码 如 下 : 


<h4> 专题 : HTML 5 下 一 代 Web 开发 标准 详 
解 </h4> 


辐 加 创建 一 个 段落 , 添加 一 个 选中 的 “ 订 
<p><input type="checkbox" checked/> 订 阅 
</p> 


国友 使 用 换行 标记 进行 换行 ， 再 添加 一 


<br/> 查看 所 有 教程 
国 路 经 过 上 面 几 步 之 后 ， 第 一 个 使 用 


专题 ，HT 了 L 5 下 一 代 web 开 发 标准 详解 


回 订阅 
查看 所 有 教程 


图 1-6 Firefox 浏览 器 运行 效果 
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97) 1.5 “实践 案例 : 浏览 器 HTML5 性 能 测试 


虽然 目前 主流 的 浏览 器 都 支持 HIMLS， 但 并 不 是 所 有 的 浏览 器 都 提供 了 对 HIMLS 的 
全 面 支持 。 有 些 浏览 器 支持 HIMLS 大 部 分 的 属性 和 元 素 ， 而 有 些 浏览 器 不 支持 或 者 只 支持 
HTML5 少量 的 元 素 和 属性 。 
因此 在 使 用 HIML5 = 
开发 网 页 时 ， 必 须 有 一 款 OC [D hmistestcom 
或 者 多 款 浏览 器 以 方便 测 此 Hm 是 est howwel does yourbrowser suppor 
试 。 下 面 介绍 测试 浏览 器 对 EE EEEI ETH 
HIML5 支持 情况 的 方法 。 
本 及 打开 任意 一 个 浏 
览 器 ， 在 地 址 栏 中 输入 YOUR BROWSER SCORES 480 OUT OF 555 POINTS 
html5test.com 后 按 回 车 键 ( 即 
Enter 键 ) 即 可 查看 当前 浏 ee 
览 器 的 HTMLS5 性 能 分 数 ， ER 
如 图 1-7 所 示 。 


从 图 1-7 中 可 以 看 出 浏 
览 器 得 分 486〈 满 分 555)， 
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当 前 是 在 Windows 7 操作 系 3d, graphics & effects 
统 中 使 用 Chrome 浏览 器 ， ee a Responsive images 
该 浏览 器 的 版 本 号 是 47。 ee 吕 

加 切 向 下 拖 动 图 1-7 中 Eee =- “图 :auu 
的 滚动 条 ， 查 看 浏览 器 对 | raies 
HTMLS5 的 具体 支持 情况 。 Goman 2D emphes 
图 18 显 示 了 Chome 浏 | Rebus a 
览 器 对 Web Components、 A ee 
Responsive images 和 2D Np ee 
Graphics 的 支持 情况 。 ee 


图 1-8 Chrome 浏览 器 对 HTML5 的 具体 支持 

从 图 1-8 中 可 以 看 出 ， 对 于 Web Components 部 分 的 内 容 来 说 得 分 是 8 分 ( 共 10 分)， 单 

击 打开 某 些 菜单 项 可 以 查看 该 浏览 器 的 得 分 详情 ， 例 如 部 分 支持 Shadow DOM 等 。 对 于 

Responsive images 部 分 来 说 得 分 15 分 ( 共 10 分 ) ， 表 示 当 前 浏览 器 支持 Responsive images 
的 所 有 功能 。 


个 试 一 试 - 
| 图 1-8 只 是 显示 了 Chrome 浏览 器 对 HIMLS 支持 情况 的 部 分 截图 ， 该 测试 网 站 还 可 以 查看 对 | 


| video 元 素 、 输 入 内 容 、 离 线 应 用 、 文 件 以 及 3D 和 2D 图 形 的 支持 情况 ， 这 里 不 再 显示 具体 的 效果 ， 
| 读者 可 以 登录 该 网 站 进行 测试 和 查看 。 | 


因 结 单 击 图 1-7 中 的 other browsers 菜单 项 可 以 查看 其 他 浏览 器 的 得 分 以 及 之 前 旧版 本 的 
得 分 ， 如 图 1-9 所 示 。 
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图 1-9 其 他 浏览 器 的 得 分 


在 图 1-9 中 可 以 比较 Chrome 浏览 器 、Opera 浏览 器 、Firefox 浏览 器 、Edge 浏览 器 以 及 
Safari 浏览 器 的 支持 情况 ，Current 表示 当前 最 新 版 本 的 得 分 ，Older 表示 旧版 本 的 得 分 。 

辐 双 单 击 导航 中 的 compare 链接 ,在 进入 的 页 面 中 可 针对 浏览 器 进行 详细 对 比 。 如 图 1-10 
所 示 为 Chrome 58、Firefox 53 和 Safari 10.2 三 个 浏览 器 之 间 的 对 比 效果 。 在 对 比 列表 中 ，Yes 
表示 支持 、No 表示 不 支持 、Disabled 表示 不 可 用 、Partial 表示 部 分 支持 。 
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1-10 浏览 器 对 比 


人 9) 1.6 CSS3 简介 


CSS (Cascading Style Sheet， 层 玛 样 式 表 ) 从 诞生 以 来 ， 就 凭借 其 自身 简单 的 语法 、 绚 
丽 的 效果 和 无 与 伦比 的 灵活 性 ， 为 Web 的 发 展 做 出 了 不 可 磨灭 的 贡献 。 目 前 所 使 用 的 CSS3 
是 从 CSS2 规范 扩展 而 来 的 ， 并 且 将 CSS 划分 为 更 多 的 模块 ， 结 构 更 加 灵活 。 


HTMLS+CSs53+Javascript 网 页 设计 入 门 与 应 用 


= 
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川 ) 1.6.1 什么 是 CSS3 


CSS3 是 CSS 技术 的 升级 版 本 ， 也 是 对 | 

”链接 表示 规则 和 语音 “样式 ”规则 的 模块 。 

但 是 ， 它 不 再 像 CSS2 那样 只 是 一 个 单一 的 | 

; inheritance 模块 ， 

| 继承 规则 。 

每 个 模块 都 有 ， 
| 盒 模型 规则 和 CSS 的 风格 定位 规则 。 


CSS2 的 扩展 ， 它 新 增加 了 许多 强大 的 功能 ， 
规范 。CSS3 把 CSS 规范 划分 成 了 多 个 模块 ， 
每 个 模块 都 是 CSS 的 某 个 子 集 的 独立 规范 ， 
例如 选择 器 、 文 本 或 者 背景 。 
自己 独立 的 创作 者 和 时 间 表 。 


CSS3 的 发 展 速度 很 快 ,2001 年 5 月 23 日 ， 
; 的 动画 模型 、3D 转换 模型 、 字 体 模型 、 图 像 
详细 列 出 了 所 | 
; 动画 过 滤 效 果 模 型 以 及 2D 转换 模型 等 。 


W3C 完成 了 CSS3 的 工作 草案 。 在 该 草案 中 
制定 了 CSS3 的 发 展 路 线 图 ， 
有 的 模块 ， 并 计划 在 未 来 逐步 进行 规范 。 


2002 年 5 月 15 日 发 布 了 CSS3 中 规范 | 
文本 行 模型 的 Line 模块 ， 同 年 ， 还 发 布 了 具 : 
有 列表 样式 和 新 增 边 框 功能 的 Lists 模块 和 | 


Border 模块 。 
2003 年 依次 发 布 了 CSS3 中 的 Generated 
and Replaced Content 模 块 、Syntax 模 块 、 


成 和 更 换 内 容 、 
法 规则 。 


咱 )》 1.6.2 CSS3 的 优 缺点 


CSS3 已 经 完成 了 多 个 模块 的 开发 ， 它 


演示 效果 和 新 定义 的 CSS 语 


设计 者 和 开发 者 带 来 了 全 新 的 体验 。 | 
完全 向 后 兼容 ， 因 此 ， 没 有 必要 修改 现在 的 
览 器 也 将 继 ; 
多 响 是 可 以 使 用 ， 
新 的 可 用 的 选择 器 和 属性 ， 这 些 选 择 器 和 属 ， 
| 做 到 ， 当 这 些 效果 不 起 作用 时 有 替代 的 解决 
和 动画 )， 而 且 还 可 以 使 用 更 加 简单 的 方式 实 ， 


设计 来 让 它们 继续 运作 ， 网 络 浏览 
续 支 持 CSS2。CSS3 主要 的 影 


性 允许 开发 者 实现 新 的 设计 效果 (例如 渐变 
现 已 有 的 效果 〈 例 如 背景 和 分 栏 ) 。 


有 学 者 曾 预 言 “CSS3 和 HTML5 将 改变 | 
广大 开发 者 已 经 通过 实 ， 
| Chrome 浏览 器 使 上 


未 来 的 Web 世界 ”。 
践 证 明了 CSS3 和 HIMLS 的 强大 。 虽 然 目前 
CSS3 和 HIML5 还 没有 完全 普及 ， 浏 览 器 的 


支持 也 在 初级 实验 阶段 ， 这 正 是 需要 读者 积 | 
， 码 显得 十 分 宛 余 。 


极 学 习 和 实践 的 时 候 , 只 有 这 样 才 不 会 落伍， 
才 不 会 被 淘汰 。 
CSS3 在 为 开发 者 带 来 全 新 体验 的 同时 ， 


还 存在 着 一 些 不 足 。 开 发 者 在 使 用 时 应 该 扬 ; 
; 果 ， 阴 影 效 果 就 是 一 个 例子 。 


长 避 短 ， 这 样 才能 更 好 地 理解 和 学 习 CSS3。 


2004 年 2 月 和 12 月 发 布 了 重新 定义 超 


2005 年 12 月 15 日 发 布 Cascading and 
它 重 新 定义 了 CSS 层 夫 和 


2007 年 先后 发 布 了 重新 定义 的 CSS 基本 


2009 年 新 定义 了 许多 新 的 模块 ， 包 括 CSS 


内 容 显示 模型 、 灵 活 的 框 布局 模型 、 视 图 模型 、 


2010 年 4 月 发 布 了 模板 布局 模型 和 分 页 
媒体 内 容 模型 ， 同 年 10 月 又 发 布 了 文本 模型 
和 修订 的 边框 和 背景 模型 。 

CSS3 的 优势 远 远 不 止 于 能 让 页 面 看 起 来 


; 酷 绚 异常 。 大 多 数 情况 下 ， 使 用 CSS3 不 仅 
| 容易 开发 和 修改 页 面 , 减少 页 面 的 加 载 时 间 ， 
Hyperlink Presentation 模块 ， 它 们 分 别 表示 生 
| 网 站 能 够 适 配 更 多 的 设备 ， 甚 至 还 可 以 优化 
i 网 站 的 搜索 结果 排名 。 


同时 还 能 增强 网 站 的 可 访问 性 和 可 用 性 ， 使 


(1) 落伍 的 正 浏览 

CSS3 新 增 的 许多 功能 在 正 浏览 器 中 无 
法 看 到 效果 ， 但 是 随 着 正 浏览 器 新 版 本 的 
发 布 ， 它 对 CSS3 和 HTML5 的 支持 功能 也 
在 增加 。 出 于 安全 性 考虑 ， 应 该 尽量 避免 将 
这 些 新 功能 用 于 重要 的 设计 中 ， 同 时 也 应 该 


方案 。 

(2) 验证 问题 和 代码 元 余 。 

目前 的 CSS3 规范 并 不 是 最 终 版 本 ， 不 
同 的 浏览 器 都 在 使 用 各 自 的 私有 属性 〈 例 如 
“-webkit-”，Opera 浏 
-”) 实现 新 功能 ， 这 可 能 会 为 
这 还 会 使 CSS 代 


览 器 使 用 “-o 
CSS 验证 埋 下 隐患 。 同 时 ， 


(3) 反面 效果 。 
设计 页 面 时 不 一 定 要 使 用 CSS3 的 新 增 
属性 ， 不 恰当 的 使 用 可 能 会 带 来 一 些 反 面 效 


川 ) 1.6.3 CSS3 的 新 增 特 性 


CSS3 相 比 于 CSS2 有 许多 不 同 ， 模 块 化 } 
细 分 的 同时 也 增加 了 新 的 功能 。 例 如 ， 增 加 : 


了 新 的 属性 ， 为 某 些 已 有 的 属性 增加 了 值 ， 
添加 了 新 的 选择 器 等 。 


医 区 半 透 明度 的 效果 


用 传统 方式 显示 颜色 时 可 以 使 用 


RGBO、 十 六 进 制 数值 (格式 是 织 RGGBB) 


或 者 直接 使 用 颜色 名 称 ， 而 CSS3 中 增加 了 . 
对 颜色 的 设置 属性 , 还 可 以 控制 色调 .饱和 度 、| 
亮度 和 透明 度 ， 它 们 已 经 成 为 CSS3 的 一 大 ; 


亮点 。 


医 字体 与 文本 样式 


CSS3 对 显示 文本 和 字体 的 样式 进行 了 更 : 
新 ， 添 加 了 很 多 新 的 属性 ， 使 CSS 的 功能 更 : 
加 强大 。 例 如 ， 实 现 文本 阴影 的 text-shadow | 
属性 ， 文 本 溢出 时 是 否 省 略 内 容 的 text : 
overflow 属性 ， 指 定 换行 或 断 开 的 word-wrap | 


属性 。 另 外 , 还 专门 提供 了 @font-face 属性 ， 
它 允 许 在 网 页 中 使 用 服务 器 端 安装 的 字体 。 


二 强大 的 选择 器 


CSS3 为 了 使 开发 者 可 以 更 加 精确 地 定位 ， 


页 面 中 的 特定 值 ， 新 增加 了 许多 选择 器 。 
ee 属性 选择 器 包括 Efatt^="val"]、 
E[att$="val"] 和 E[att*="val"] 三 种 。 


其 中 三 表示 元 素 ，att="val" 表示 具 | 


有 att 属性 ， 且 值 以 val 开头 的 元 素 ; 


att$-"val" 表 示 具 有 att 属 性 , 且 值 以 S 结 
尾 的 元 素 , at*"val" 表示 具有 at 属性， 


且 值 中 含有 val 的 元 素 。 


。 结构 化 伪 类 选择 器 CSS3 中 新 增加 了 


许多 伪 类 选择 器 ， 具 体 说 明 如 下 。 


4 E:root 匹配 文档 的 根 元 素 ， 在 


HTML 中 根 元 素 永远 是 html。 


4 E:nth-child(n) 匹配 父 元 素 中 的 


第 nn 个 子 元 素 EE。 


CSS3 中 新 增 的 与 颜色 相关 的 样式 有 多 
个 ， 例 如 使 用 RGBA 和 HSLA 模式 设置 透明 ， 
度 、HSL 设置 颜色 以 及 opacity 设置 不 透明 度 。， 
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* E:nth-last-child(n) 匹配 父 元 素 
中 的 倒数 第 了 个 子 元 素 卫 。 

4 E:nth-of-type(n) 匹配 同类 型 中 
的 第 了 个 同 级 兄弟 元 素 E。 

* E:nth-last-of-type(n) 匹配 同类 
型 中 的 倒数 第 nn 个 同 级 兄弟 元 素 E。 

4 E:last-child 匹配 父 元 素 中 的 最 
后 一 个 卫 元 素 。 

4 E:first-of-type 匹配 同 级 兄弟 元 
素 中 的 第 一 个 下 元 素 。 

* E:only-child 匹配 属于 父 元 素 中 
唯一 子 元 素 的 下 。 

4 E:only-of-type 匹配 属于 同类 型 
中 唯一 兄弟 元 素 的 EE。 

* E:empty 匹配 没有 任何 子 元 素 
(包括 text 节点 ) 的 元 素 E。 

UI 元 素 状 态 伪 类 选择 器 UI 元 素 状 

态 伪 类 选择 器 与 结构 化 伪 类 选择 器 一 

样 ， 指 定 的 样式 只 有 当 元 素 处 于 某 种 

状态 时 才 起 作用 ， 在 默认 状态 下 不 起 

作用 。 

* E:enabled 匹配 所 有 用 户 界面 
(form 表单 ) 中 处 于 可 用 状态 的 下 
元 素 。 

4 E:disabled 匹配 所 有 用 户 界面 
(form 表单 ) 中 处 于 不 可 用 状态 的 

4 E:checked 匹配 所 有 用 户 界面 
(form 表单 ) 中 处 于 选中 状态 的 元 

4 E:selection 匹配 EE 元 素 中 被 用 
户 选 中 或 处 于 高 亮 状态 的 部 分 。 

否定 伪 类 ”CSS3 中 新 增 了 E:not(s) 选 

择 器 ， 匹 配 所 有 未 匹配 简单 选择 符 s 的 

元 素 E。 

目标 伪 类 CSS3 中 新 增 了 E:target 选 

择 器 ， 匹 配 相关 URL 指向 的 了 元素 。 

通用 兄弟 元 素 选择 器 ”兄弟 选择 器 用 

来 指定 位 于 同一 个 父 元 素 之 中 的 某 个 

元 素 ， 其 后 的 所 有 其 他 种 类 的 兄弟 元 

素 均 可 使 用 该 样式 。CSS3 中 新 增加 了 
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ee 


E-~F 兄弟 选择 器 ， 它 们 表示 匹配 E 元 ; 
素 到 下 元素 的 样式 。 


医 内 容 属性 
CSS 中 可 以 使 用 :before 和 :after 伪 类 元 

素 结合 content 属性 在 对 象 之 前 或 者 之 后 显示 
内 容 。CSS3 对 设置 内 容 的 content 属性 重 


是 


进行 了 定义 ， 基 本 语法 如 下 : 
content:normal | string | attr() | uri() | 
counter() 
二 使 布 局 和 样式 布局 
盒子 模型 可 以 轻松 创建 适应 浏览 器 窗 


的 流动 布局 或 者 自 适应 字体 大 小 的 布局 ， 它 
为 开发 者 提供 了 一 种 非常 灵活 的 布局 方式 。 
样式 布局 是 对 网 页 中 的 文字 或 其 他 内 容 设置 
的 一 些 基 本 样式 。CSS3 新 增加 了 许多 与 它 介 
有 关 的 属性 ， 大 体 上 分 为 以 下 三 类 。 

(1) 盒 布局 属性 。 

CSS3 对 CSS2 中 的 盒 模型 布局 属性 进行 
了 重新 定义 ， 说 明 如 下 。 

@ overflow ”检索 或 设置 当 对 象 的 内 容 超 
过 其 指定 高 度 及 宽度 时 如 何 管理 内 容 。 
overflow-x 检索 或 设置 当 对 象 
的 内 容 超过 其 指定 宽度 时 如 何 管理 
内 容 。 
overflow-y 检索 或 设置 当 对 象 
的 内 容 超过 其 指定 高 度 时 如 何 管理 
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内 容 。 
@ display 设置 或 检索 对 象 是 否 显示 及 
如 何 显示 。 


CSS3 在 CSS2 的 基础 上 提出 了 弹性 盒 
型 的 概念 。 为 了 适应 弹性 盒 模型 的 表现 需 
新 增加 了 8 个 属性 ， 如 下 所 示 。 
box-align ”定义 子 元 素 在 盒子 内 垂直 
方向 上 的 空间 分 配方 式 。 
box-direction ”定义 盒子 的 显示 顺序 
box-flex ”定义 子 元 素 在 盒子 内 的 自 适 
应 尺寸 。 
box-flex-group 
群 组 。 
box-lines ”定义 子 元 素 分 列 显 示 。 


定义 自 适应 子 元 素 


@ box-ordinal-group ”定义 子 元 素 在 盒 


子 内 的 显示 位 置 
e@ box-orient 定义 盒子 分 布 的 坐 
标 轴 。 
@ box-pack 定义 子 元 素 在 盒子 内 水 平 
方向 的 空间 分 配方 式 。 
根据 W3C 对 CSS3 的 要 求 ， 盒 模型 属性 
在 不 断 地 更 新 ， 目 前 ，CSS3 已 经 使 用 flow- 


来 代替 以 box- 开头 的 盒 模型 属性 。 

(2) 多 列 类 布局 属性 。 

这 些 属性 能 够 对 网 页 中 的 文字 进行 排版 ， 
FE 版 时 为 每 列 指定 特定 的 层 或 者 段落 。 
columns 可 以 同时 定义 多 栏 的 数目 
和 各 栏 的 宽度 。 
column-width 可 以 定义 各 栏 的 
宽度 。 
column-span 定义 元 素 可 以 在 栏目 
上 定位 显示 。 
column-rule ”定义 各 栏 之 间 边 框 的 宽 
度 、 样 式 和 颜色 。 
column-rule-color 定义 各 栏 之 间 边 
框 的 颜色 。 
column-rule-width ”定义 各 栏 之 间 边 
框 的 宽度 。 
column-rule-style ”定义 各 栏 之 间 边 
框 的 样式 。 
column-gap 
间距 。 
column-fill 
统一 。 
column-count 定义 栏目 的 数目 。 
column-break-before 定义 元 素 之 
前 是 否 断 行 。 
column-break-after 
是 否 断 行 。 

(3) 用 户 界面 属性 。 

这 些 属性 用 来 定义 与 界面 有 关 的 内 容 。 
如 ， 可 以 定义 轮廓 显示 的 样式 ， 也 可 以 定 
义 缩放 区 域 ， 还 可 以 设置 当前 元 素 在 文档 中 
的 导航 序列 号 等 

@ resize 使 元 素 的 区 域 可 缩放 ， 调 节 
元 素 的 尺寸 。 适 用 于 任意 获得 overflow 
条 件 的 容器 。 


定义 两 栏 之 间 的 


定义 栏目 的 高 度 是 否 


定义 元 素 之 后 


是 矩形 。 
© outline-width 


负数 。 


e outline-style 用 于 设置 一 个 元 素 整 ; 
; 导航 。 
e ”outline-offset ”让 轮廓 偏离 容器 边缘 ，: 


个 轮廓 的 样式 。 


即 可 以 调整 外 框 与 容器 边缘 的 距离 。 


e@ outline-color 设置 一 个 元 素 整个 轮 
廓 中 可 见 部 分 的 颜色 。 如 果 轮 廓 的 样 ; 
; 色 、 图 片 或 者 贺 角 样式 ， 它 们 分 别 是 border- 


式 值 是 none， 则 轮廓 不 会 出 现 。 


e nav-index 它 取 代 了 HIML4 中 的 | 
tabindex 属性 ， 为 当前 元 素 指 定 其 在 当 | 


前 文档 中 导航 的 序列 号 。 


@ box-sizing 改变 容器 的 盒 模型 组 成 


方式 。 


其 中 ，nav-index 属性 为 当前 元 素 指 定 ， 
其 在 当前 文档 中 导航 的 序列 号 。 导 航 的 序列 
号 指定 了 页 面 中 元 素 通 过 键盘 操作 或 获得 焦 


点 的 中 ， 该 属性 可 必 9 : 

的 顺序 ， 该 属性 可 以 存在 于 广 套 的 页 面 元 不 会 陌生 ， 它 是 CSS 中 使 用 频率 最 高 的 属性 。 
除了 nav-index 属性 外 ， 还 可 以 通过 nav- : 人 本 De 必 除了 保全 前 
up、nav-down、nav-left 或 nav-right 属性 设置 | 的 写法 外 ， 还 可 以 在 该 属性 中 添加 多 个 背景 
户 体验 ， 可 以 用 User Agent 自 定义 ， 属 性。 


素 中 。 


更 好 的 F 
切换 焦点 的 控制 顺序 方向 。 

为 了 使 User Agent 能 按 顺序 获取 焦点 ， 
页 面 元 素 需 要 遵循 以 下 规则 。 


该 元 素 支 持 nav-index 属性 ， 而 被 赋予 ， 
正 整数 属性 值 的 元 素 将 会 被 优先 导航 。User | 
Agent 将 按照 nav-index 属性 值 从 小 到 大 进 | 
行 导航 。 属 性 值 无 须 按 次 序 ， 也 无 须 以 特 : 
Re : background 属性 重新 进行 了 定义 ， 语 法 


元 素 将 以 它们 在 字符 流 中 出 现 的 顺序 进行 ， 如 下 


符 流 中 出 现 的 顺序 进行 导航 。 


对 那些 不 支持 nav-index 属性 或 者 nav_ | 
index 属性 值 为 auto 的 元 素 ， 将 以 它们 在 字 
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e outline 可 以 设置 元 素 周围 的 轮廓 : 
线 ， 轮 廓 线 不 会 占据 空间 ， 也 不 一 定 : 

; 素 的 快捷 键 依赖 于 User Agent 的 设置 。 例 
设置 元 素 整 个 轮廓 的 : 
宽度 ， 只 有 当 轮 廓 样式 不 是 none 时 才 | 
会 起 作用 。 如 果 样式 为 none， 宽 度 会 ; 
重 置 为 0。 该 属性 的 值 不 允许 设置 为 | 
; 可 能 会 循环 到 导航 序列 的 开始 或 结束 。 另 


对 那些 禁用 的 元 素 , 将 不 参与 导航 的 排序 。 
用 户 所 使 用 的 开始 导航 和 激活 页 面 元 


如 ， 通 常 使 用 Tab 键 按 顺序 导航 ， 而 Enter 
键 则 用 于 激活 选中 的 元 素 。User Agent 通常 
定义 了 反 向 顺序 导航 的 快捷 键 ， 当 通过 Tab 
键 导航 到 序列 的 结束 或 开始 时 ，User Agent 


外 ， 按 键 组 合 Shift+Tab 通常 用 于 反 向 序列 
医 区 贺 角 效果 


CSS3 还 添加 了 4 个 属性 用 于 设置 边框 的 
效果 ， 这 些 属性 可 以 设置 边框 各 个 部 分 的 颜 


color、border-image、border-radius 和 box- 
shadow。 
e@ border-color 设置 边框 的 颜色 值 。 
@ border-image 设置 边框 的 背景 图 片 。 
e@ border-radius ”定义 边框 的 圆 角 样式 。 
e@ box-shadow 设置 块 的 阴影 效果 。 


二 多 背景 样式 
有 开发 经 验 和 设计 经 验 的 用 户 对 背景 者 


e@ background-size 设置 背景 图 像 的 
尺寸 ， 即 宽度 和 高 度 。 

@ background-clip 设置 背景 图 像 的 显 
示范 围 或 者 裁剪 区 域 。 

@ background-origin 设置 背景 图 片 的 
定位 原点 。 

除了 新 增 的 3 个 属性 外 ，CSS3 还 对 


background: [background-image] | 
[background-origin] | [background-clip] | 
[background-repeat] | [background-size] 
[background-position] 
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LE 渐变 和 动画 
CSS3 的 新 特性 不 仅仅 表现 在 以 上 几 个 方面 ， 它 还 对 渐变 、 过 渡 、 动 画 以 及 旋转 等 方面 进 
行 了 设置 ， 添 加 了 与 这 些 效果 有 关 的 属性 。 例 如 ， 使 用 linear-gradient 和 radial-gradient 分 别 
实现 线性 渐变 和 径 向 渐变 ， 使 用 transform 的 有 关 属 性 实现 图 像 或 图 形 的 平移 、 缩 放 和 旋转 等 
效果 ， 使 用 transition 的 有 关 属 性 (例如 transition 属性 、transition-duration 属性 和 transition- 
delay 属性 等 ) 指定 在 一 定 的 时 间 内 实现 平滑 过 渡 动 画 的 效果 。 


7 1.7 ”实践 案例 : 浏览 器 CSS3 性 能 测试 


CSS3 为 广大 Web 开发 者 带 来 了 全 新 的 体验 , 但 是 并 非 所 有 的 浏览 器 都 提供 对 它 的 支持 。 
各 个 主流 的 浏览 器 都 定义 了 各 自 的 私有 属性 ， 以 便 用 户 体验 CSS3 的 新 特性 。 浏 览 器 这 种 定 
义 自己 的 私有 属性 的 方法 可 以 避免 不 同 的 浏览 器 在 解析 相同 属性 时 出 现 冲突 ， 但 是 也 为 开发 
者 带 来 了 麻烦 ， 因 为 Web 开发 者 不 仅 需要 使 用 更 多 的 CSS 样式 代码 ， 而 且 非 常 容易 导致 同 
一 个 页 面 在 不 同 的 浏览 器 上 表现 不 一 致 。 

不 同 浏览 器 的 内 核 有 所 不 同 ， 导 致 浏览 器 定义 的 私有 属性 也 不 同 。Webkit 类 型 的 浏览 器 
(例如 Chrome) 的 私有 属性 是 以 “-webkit ”为 前 缀 ，Gecko 类 型 的 浏览 器 (例如 Firefox) 
的 私有 属性 是 以 “-moz-” 为 前 级，Opera 浏览 器 的 私有 属性 是 以 “-o-” 为 前 缀 ， 而 下 浏览 

器 的 私有 属性 是 以 “-ms-” 为 前 缀 。 

要 测试 浏览 器 对 CSS3 的 支持 情况 ， 最 简单 的 方法 就 是 使 用 Can I Use 工具 。 该 工具 实 
际 是 一 个 网 站 ， 网 址 是 http://www.caniuse.com， 它 的 功能 非常 强大 ， 除 了 可 以 检测 浏览 器 对 
CSS3 各 个 模块 的 支持 情况 外 ， 还 能 检测 HTML5 和 SVG 等 其 他 内 容 。Can I Use 工具 的 首页 
如 图 1-11 所 示 。 
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图 1-11 CanIUse 网 页 


开发 者 可 以 单 击 图 1-11 中 的 链接 查看 浏览 器 的 支持 情况 ， 也 可 以 在 网 页 的 搜索 区 域 输 

入 属性 或 者 元 素 等 内 容 进行 搜索 。 例 如 ， 在 图 1-12 中 列 出 了 正 、Edge、Firefox、Chrome、 

Safari 和 Opera 等 多 个 浏览 器 的 主流 版 本 对 text-align-last 属性 的 支持 情况 。 其 中 ， 红 色 区 域 

表示 当前 浏览 器 的 版 本 不 支持 此 属性 ， 浅 绿色 区 域 表 示 对 此 属性 支持 ， 深 绿色 区 域 表示 部 分 
支持 ， 灰 色 区 域 表 示 未 知 。 
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CSS3 text-align-last B wo 


C55 property to describe how the last Ine of 
a block or aline right bel sd line 


图 1-12 浏览 器 text-align-last 属性 支持 情况 


在 Can IUse 网 站 上 也 可 以 对 各 浏览 器 的 | 
CSS3 性 能 做 对 比 。 如 图 1-13 所 示 为 Firefox ， 
53、Chrome 58、Safari 10.1 和 Opera 48 四 款 | 
浏览 器 的 对 比 效果 。 | 

除了 CSS3 外 ， 该 网 站 还 支持 对 | 
HTML5、SVG 和 JS API 进行 性 能 测试 。 如 ; 
图 1-14 所 示 为 各 浏览 器 对 HIML5 中 Web | 
App Manifest 特性 的 支持 情况 。 | 


图 1-14 Web App Manifest 特性 支持 情况 
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Q)) 1.8 练习 题 


一 、 填 空 是 

1. 超 文 本 标记 语言 的 英文 全 称 是 。 

2. 要 使 用 HTML5 的 语法 指定 页 面 编 码 类 型 是 UIF-8， 可 以 使 用 的 代码 是 。 
3, 使 用 CSS3 新 增 的 属性 可 以 实现 线性 渐变 。 

4. Webkit 类 型 的 浏览 器 的 私有 属性 以 为 前 级 。 

二 、 选 择 题 

1. 在 下 列 选项 中 ， 不 是 Web 开发 标准 。 

A. HIML B.CSS C. JavaScript D.PHP 
2. 在 下 列 选项 中 ， 不 属于 使 用 Web 开发 标准 后 的 优势 。 
A. 页 面 内 容 被 更 多 的 用 户 所 访问 

B. 更 加 安全 

C. 更 丰富 的 界面 表现 方式 

D. 更 容易 被 搜索 引擎 搜索 收录 
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3. 在 下 列 选项 中 ， 不 属于 body 元 素 的 属性 。 
A. width B. bgcolor C. text D.link 
4. 在 下 列 选项 中 ， 不 属于 HIMLS 的 新 语法 。 


A. <!IDOCTYPE html> 

B. <html lang="zh-cn"> 

C. <meta charset="UTF-8" /> 

D. <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn"> 

5.， 在 下 列 选项 中 ， 不 会 将 具有 布尔 值 的 属性 值 设 置 为 tue。 
A. 不 写 属性 

B. 只 写 属性 不 写 值 

C. 将 属性 值 设 置 为 空 

D. 将 属性 值 设置 为 属性 名 


< 上 机 练习 : 了 解 Firefox 浏览 器 的 HTML5 和 CSS3 支持 情况 


本 次 上 机 要 求 读者 下 载 并 安装 Firefox 61 浏览 器 ， 然 后 根据 本 章 介 绍 的 内 容 了 解 该 浏览 
器 对 HTML5 和 CSS3 的 支持 情况 ， 再 与 Chrome 68 进行 性 能 对 比 。 
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HTML5 的 新 增 元 素 和 属性 是 它 的 一 大 亮点 。 这 些 新 增 元 素 使 文档 结构 更 加 清晰 明确 、 容 
易 阅读 ， 属 性 则 有 助 于 读者 实现 更 强大 的 功能 。 根 据 HTMLS5 新 增 元 素 的 使 用 情况 和 语义 ， 可 
以 将 它们 进行 不 同 的 分 类 。 有 些 元 素 的 定义 很 模糊 ， 以 header 元 素来 说 ， 它 既 可 以 是 结构 元 
素 ， 也 可 以 作为 语义 元 素 ， 可 以 将 该 元 素 放 到 任意 一 种 类 型 中 ， 这 也 是 为 什么 在 不 同 的 参考 
资料 中 ， 同 一 个 元 素 所 属 分 类 不 同 的 原因 。 

本 章 主要 介绍 HTML5 中 新 增 的 与 网 页 结构 相关 的 元 素 (包括 头 部 元 素 、 结 构 元 素 、 语 义 
元 素 、 节 点 元 素 和 交互 元 素 ) 和 HTML5 中 新 增 的 3 个 全 局 属性 。 通 过 本 章 的 学 习 ， 读 者 可 以 
熟练 地 使 用 这 些 元 素 和 属性 构建 网 页 。 


必 本 章 学 习 要 点 
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97 2.1 认识 html 根 元 素 


一 个 HIML 文档 中 包含 的 任何 内 容 都 是 : 
HTML 元 素 ， 这 些 元 素 的 根 是 hml。html 是 
HTML 文档 的 最 外 层 元 素 ， 也 称 为 html 根 元 
素 ， 所 有 其 他 元 素 都 被 包含 在 该 元 素 内 。 

浏览 器 在 遇 到 html 根 元 素 时 将 它 理解 为 
HTML 文档 。 在 用 法 上 ，HTMLS5 中 的 html 
根 元 素 与 HTML 4.01 没有 太 大 的 区 别 ，3 
要 区 别 就 是 xmlns 属性 。 该 属性 的 默认 值 是 

“http://www.w3.org/1999/xhtml”， 在 HTM 
4.01 中 是 必需 的 ， 用 于 对 HTML 文档 进行 验 ， 
证 ， 而 在 HTML 5 中 该 属性 可 以 省 略 。 | S/n 


HTML5 为 hml 根 元 素 新 增 了 一 个 
anifest 属性 ， 用 于 指向 一 个 保存 文档 缓存 
信息 的 URL。 另 外 ， 使 用 lang 属性 可 以 定义 
TML 文档 使 用 的 语言 ， 这 对 搜索 引擎 和 浏 
览 器 非常 有 帮助 ， 默 认 值 是 en。 

根据 W3C 推荐 标准 ， 应 该 通过 html 根 
元 素 的 lang 属性 对 页 面 中 的 主要 语言 进行 声 
月 。HTMLS5 的 示例 代码 如 下 : 


<html lang="en"> 


9)) 2.2 文档 头 部 元 素 


在 HTML 文档 中 ，head 通常 是 html 根 元 素 下 的 第 一 个 元 素 。head 元 素 中 包含 的 是 对 页 
面 头 部 信息 的 设置 ， 如 标题 、 描 述 、 收 藏 图 片 、 样 式 和 脚本 等 ， 这 些 内 容 不 会 显示 在 页 面 上 。 
因此 ，head 元 素 又 可 以 称 为 HTML 文档 的 头 部 元 素 。 

在 表 2-1 中 列 出 了 头 部 元 素 中 常用 的 子 元 素 及 其 描述 。 


表 2-1 头 部 元 素 常用 的 子 元 素 
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为 页 面 上 的 所 有 链接 定义 默认 地 址 或 默认 目标 
定义 文档 与 外 部 资源 之 间 的 关系 ， 如 链接 外 部 样式 表 ， 链 接 外 部 图 标 
定义 页 面 的 辅助 信息 ， 如 针对 搜索 引擎 的 描述 和 关键 词 
定义 客户 痛 脚 本 ， 例 如 JavaScript， 也 可 以 链接 外 部 脚本 文件 
style 定义 页 面 的 样式 信息 

title 定义 文档 的 标题 


三 base 元 素 


在 HIMLS 中 建议 把 base 作为 head 的 第 一 个 子 元 素 ， 这 样 head 中 的 其 他 元 素 就 可 以 使 
base 的 信息 了 。 如 下 代码 演示 了 base 元 素 的 使 用 方法 。 


script 


<head> 

<base href="http://www.oa.cn/" target="_blank" /> 
</head> 

<body> 
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<a href="index.html "> 首页 </a> 
</body> 


在 这 里 将 默认 的 URL 设 置 为 www | 
因此 首页 的 真实 链接 URL 是 www 
| 是 可 选 的 ， 不 再 支持 xml 
;async 属性 。async 属性 上 
; 时 是 否 立即 异步 执行 。 

link 元 素 常 用 于 链接 外 部 样式 表 ， 示 例 | 


oa.cn, 


oa.cn/index.html。 
外 [ink 元 素 


代码 如 下 : 


<link rel="stylesheet" type="text/css" href= 


"menu.css" /> 


HTML5 中 的 link 元 素 不 再 支持 | 
target 属性 ， 但 新 增 了 sizes 属 | 
属性 仅 适 用 于 rel 属性 为 icon 的 情况 ，; 
此 时 该 属性 用 于 定义 图 标的 尺寸 ， 示 例 代 码 ; 


charset、rev 和 
性 。sizes 


如 下 : 


<link rel="icon" href="demo_icon.gif" type= 
"image/gif" sizes="16x16" /> 


国 [mete 元 素 


在 HTML5 中 ,meta 元 素 不 再 支持 | 
scheme 属性 ， 另 外 新 增 了 一 个 charset 属性 : 


HTML5 规范 的 meta 元 素 的 用 法 。 


<meta charset="utf-8 "> 

<meta name="keywords" content="HTML, CSS, 
XML, XHTML, JavaScript" /> 

<meta name="description" content=" 免费 的 
Web 技术 教程 " /> 

<meta name="revised" content="tangguo, 
2018/1/1/" /> 

<meta http-equiv="refresh" content="10" /> 


a script 元 素 


对 话 框 。 


用 于 快速 定义 页 面 的 字符 集 。 以 下 都 是 符合 | 


<script type="text/javascript"> 
alert("Hello HTML 5"); 
</script> 


在 HIML5 中 ，script 元 素 的 type 属性 
属性 ， 而 且 新 增 了 


于 定义 当 脚本 可 用 


下 面 的 示例 代码 以 异步 方式 在 页 面 中 输 


; 出 “Hello HTML5” 字 符 串 。 


<script type="text/javascript" async="async"> 
document.write ("Hello HTML 5"); 
</script> 


区 :ye 元 素 


style 元 素 用 于 定义 页 面 所 用 到 的 CSS 样 


， 式 代码 。 例 如 ， 下 面 的 示例 代码 定义 页 面 中 
| 元 素 的 字体 颜色 为 黑色 , hl 元 素 的 字体 颜色 为 


| 红色 。 
| <style type="text/css"> 

hl {color:red} 

p {color:black} 

</style> 

在 HTML5 中 ， 为 style 元 素 增 加 了 


， scoped 属性 ， 该 属性 可 以 为 文档 的 指定 部 分 
| 定义 样式 ， 而 不 是 整个 文档 。 使 用 scoped 属 
”性 后 所 规定 的 样式 只 能 应 用 于 style 元 素 的 父 
| 元素 及 其 子 元 素 。 


攻 区 tte 元 素 


title 元 素 定义 的 标题 将 显示 在 浏览 器 的 标 


， 题 栏 、 收 藏 天 以 及 搜索 引擎 的 结果 中 。HTML 
401 和 HIML5 中 的 tile 元 素 用 法 相同 ， 但 是 
”要 注意 一 个 文档 中 该 元 素 只 能 出 现 一 次 。 示 
| 例如 下 : 

script 元 素 通 常用 于 定义 一 段 JavaScript | 


脚本 ， 或 者 链接 外 部 的 脚本 文件 。 例 如 ， 下 ; 
面 的 示例 用 于 弹出 一 个 显示 Hello HTML5 的 


<title>HTML 5 发 展 过 程 </title> 


【 例 2-1]】 
使 用 上 面 介绍 的 6 个 元 素 创建 一 个 实 
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例 ， 通 过 该 实例 演示 各 个 head 子 元 素 的 具 | ee 
体 用 法 。 | A 
IO 新 建 一 个 HIML 文件 ， 搭 建 HIMLS ， a 
的 基本 结构 。 | </html> 
i 2 | 加 多 在 body 元 素 中 添加 要 显示 的 内 容 ， 
<head> ,如 下 所 示 为 本 实例 使 的 代码 。 


<div class="yh_c"> 
<div class="k1_top"> 
<a class="yh_back1" href="#"><i class="fa fa-chevron-left"></i></a> 
<h1id="h1"></h1> 
</div> 
<h2 class="kq_search_h2"> 信息 查询 </h2> 
<div class="kq_search_box"> 
<div class="kq_search1"><input class="kq_txt1” type="text" placeholder=" 输 入 员工 姓名 "><i 


class="fa fa-search"></i></div> 
</div> 
</div> 


加 名 现在 运行 将 会 看 到 如 图 2-1 所 示 的 效果 。 接 下 来 在 head 元 素 中 使 用 base 元 素 定义 页 
面 的 默认 URL 为 data.yidong.com。 


<base href="http://data.yidong.com/" target="_blank" /> 


厅 使 用 meta 元 素 定义 页 面 的 字符 集 为 utf-8。 
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<meta charset="utf-8"> 


加 旺 使 用 meta 元 素 为 页 面 添加 关键 字 、 描 述 信息 以 及 版 权 声明 。 


<meta name="keywords" content=" 考勤 ， 智能 考勤 , 考勤 系统 ,智能 考勤 ,门禁 考勤 " /> 
<meta name="description" content=" 一 套 满 足 你 需求 的 考勤 系统 "/> 
<meta name="Copyright" content=" 糖果 科技 " /> 


大 本 使 用 link 元 素 为 页 面 添 加 一 个 收藏 图 标 。 


<link rel="icon" href="images/logo.ico" type="image/gif" sizes="32x32" /> 


大友 使 用 title 元 素 设 置 页 面 的 标题 为 “考勤 管理 


<title> 考勤 管理 </title> 


大 可 使 用 style 元 素 为 body 中 的 内 容 定义 显示 样式 。 


<link href="css/bootstrap.min.css" rel="stylesheet"> 


<link href="css/font-awesome.min.css" rel="stylesheet"> 
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<link href="css/css.css" rel="stylesheet"> 
<style type="text/css"> 

body{background: url(images/bg3.jpg) no-repeat; background-size: 100% 100%;} 
</style> 


四 加 使 用 script 元 素 编写 一 段 JavaScript 脚本 在 页 面 加 载 完 成 后 执行 。 


<script src="js/jquery.min.js"></script> 
<script> 
S$(function(){ 
$("#h1").html(" 信息 查询 "); 
}); 
</script> 


了 保存 之 后 再 次 在 浏 


览 器 中 查看 ， 将 会 看 到 如 图 2-2 所 示 的 运行 效果 。 
na Te] 
所 © DifileyVWDYHtmlspace/code27UVindexhtml 灾 三 
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信息 查询 
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图 2-1 添加 head 子 元 素 之 前 的 运行 效果 2-2 添加 head 子 元 素 之 后 的 运行 效果 


Q/)) 2.3 ”结构 元 素 


HIMLS 为 了 使 文档 的 结构 更 加 清晰 明确 ， 逻 辑 思 路 更 加 清晰 ， 增 加 了 一 些 与 文档 结构 
关联 的 结构 元 素 ， 如 页 眉 、 页 脚 和 内 容 区 块 等 。 下 面 依 次 介绍 这 些 结构 元 素 。 


川 ) 2.3.1 header 元 素 


HTML5 新 增 的 header 元 素 是 一 种 具有 引导 和 导航 作用 的 结构 元 素 ， 用 于 定义 文档 的 页 
眉 〈 介 绍 信息 )。header 元 素 通常 用 来 放置 整个 页 面 或 页 面 内 的 一 个 内 容 区 块 的 标题 ， 也 可 以 
包含 网 站 Logo 图 片 、 数 据 表格 和 搜索 表单 等 内 容 。 

整个 页 面 的 标题 应 该 放 在 页 面 的 开头 ， 使 用 方法 与 其 他 元 素 一 样 ， 基 本 格式 如 下 : 


<header> 
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<h1> 网 页 主题 </h1> 


</header> 


o 一 技巧 
| 在 一 个 HTML 网 页 中 ， 并 不 限制 header 
元 素 的 个 数 。 一 个 网 页 中 可 以 拥有 多 个 header 
元 素 ， 也 可 以 为 每 一 个 内 容 块 添加 header 


【 例 2-2] 


以 下 代码 来 表示 标题 。 


<div id="container "> 
<div id="header"> 


<!-- 这 里 是 页 面 头 部 内 容 -> 


<div id="container"> 
<header class="xy_h"> 
<div class="btn-group"> 


</div> 
<ul class="dropdown-menu"> 
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</ul> 
</div> 
</header> 
</div> 


泗 


header{ 
height: 87px; 
border-bottom: 17px solid #f1f2f7; 
padding: 9px 68px 0 18px; 


} 


</div> 
</div> 
<!~ 其 他 内 容 -> 


</div> 


在 上 述 代码 中 ， 最 外 侧 的 div 元 素 搭建 


| 整个 网 站 的 框架 ，id 属性 值 为 header 的 div 
， 元 素 表示 网 站 的 头 部 信息 。 另 外 ， 可 以 通过 
| 不同 种 类 的 选择 器 〈 例 如 ID 选择 器 和 样式 先 
| 择 器 ) 为 div 元 素 添 力 
| 的 示例 CSS 样式 代码 如 下 

在 一 个 完整 的 网 站 中 ， 首 先 会 设计 网 站 | 
的 页 面 布局 。HTMLS 出 现 之 前 ， 通 常会 使 用 |; 


CSS 样式 。 上 述 内 容 


/* 定义 全 局 的 样式 */ 
/* 定义 项 部 标题 的 样式 */ 


#container {} 
#header {} 


j header 元 素来 替换 id 属性 值 为 


下 面 


header 的 div 元 素 。 页 面相 关 代码 如 下 ; 


<div class="xy_user" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
<img src="images/yh_p1.jpg" alt="" /> 你 好 ， 用 户 1 <span class="caret"></span> 


<li><a href="#" class="clearfix"><i class="fa fa-cog"></i> 修改 密码 </a></li> 
<li><a href="#" class="clearfix"><i class="fa fa-share-square-o"></i> 退出 </a></li> 


<a href="#" class="xy_logo"><img src="images/xy_logo.png" alt="" /></a> 


重新 更 改 与 header 元 素 相关 的 CSS 代码 ， 直 接 通过 元 素 选择 器 指定 样式 。 也 可 以 说 ， 使 
#header (ID 选择 器 ) 设置 的 代码 可 以 通过 header (元 素 选 择 器 ) 替换 。 部 分 代码 如 下 : 


在 浏览 器 中 运行 更 改 后 的 HIML 网 页 ， 其 效果 如 图 2-3 所 示 。 
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本 尖 宇 医疗 险 你 好 ,用户 1 ~ 
© 是 


2-3 header 元 素 示例 


叫 ) 2.3.2 article 元 素 


article 元 素 代表 文档 、 页 面 或 者 应 用 程序 中 独立 的 、 完 整 的 、 可 以 独自 被 外 部 引用 的 内 容 。 
它 可 以 是 一 篇 博客 或 者 报纸 、 刊 物 中 的 文章 、 一 篇 论坛 帖子 、 一 段 用 户 评论 、 独 立 的 插件 ， 
或 者 其 他 任何 独立 的 内 容 。 

article 元 素 可 以 单独 使 用 ， 也 可 以 和 其 他 元 素 结合 使 用 。article 元 素 通常 可 以 有 自己 的 标 
题 ， 标 题 一 般 放 在 header 元 素 中 ， 有 时 还 可 以 有 脚注 ， 脚 注 一 般 放 在 footer 元 素 中 。 

【 例 2-3】 

article 元 素 是 一 个 容器 ， 里 面 可 以 放 各 种 布局 代码 。 下 面 通过 article 元 素 显 示 博 客 中 的 
一 篇 文章 ， 代 码 如 下 : 


<article class="post type-post"> 
<div class="post-top"> 
<div class="post-thumbnail"> <img class="img-responsive" src="images/blog-single/1.jpg" alt="post 
Image"> </div> 
<div class="post-meta"> 
<div class="entry-meta"> 
<div class="author-avatar"> <img src="images/author/1.jpg" alt="Author Image"> </div> 

<div class="entry-meta-content"> <span class="author-name"> <a href="#"> 系统 管理 员 
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</a> </span> <span class="entry-date"> 
<time datetime="2018-01-15">2018-01-15</time> 
</span> </div> 
</div> 
</div> 
</div> 
<div class="post-content"> 
<h2 class="entry-title"><a href="blog-single.html">HTML 5 简介 </a></h2> 
<p class="entry-text">HTML 5 将 成 为 HTML、XHTML 以 及 HTML DOM 的 新 标准 。 </p> 
<p> HTML 5 仍 处 于 完善 之 中 。 然 而 ， 大 部 分 现代 浏览 器 已 经 能 够 支持 HTML 5 的 某 些 特性 。 </p> 
<blockquote> HTML 5 中 的 一 些 有 趣 的 新 特性 : 
<p> 用 于 绘画 的 canvas 元 票 </p> 
<p> 用 于 媒介 回放 的 video 元 票 和 audio 元 票 </p> 
<p> 对 本 地 离线 存储 的 更 好 的 支持 </p> 
<p> 新 的 页 面 元 票 ， 比 如 article、footer、header、nav、section</p> 
<p> 新 的 表单 控件 ， 比 如 calendar、date、time、email、url、search </p> 
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ISTIEIETLE | 
</blockquote> blo tem [EE 
<p> 更 多 内 容 >>> 

</p> a hss 
</div> i ; 
</article> 本 


在 浏览 器 中 运行 上 述 代 
码 查看 效果 ,如 图 2-4 所 示 。 


图 2-4 article 元 素 示 例 


Ly 试 一 试 - 
| 1 
article 元 素 是 可 以 进行 谋 套 的 ， 内 层 的 内 容 原 则 上 需要 与 外 层 的 内 容 相关 联 。 例 如 ， 针 对 某 篇 | 


| 文章 的 评论 可 以 使 用 蔗 套 article 元 素 的 方式 ， 用 来 呈现 评论 的 article 元 素 包含 在 表示 整体 内 容 的 
| article 元 素 中 。 | 


川 ) 2.3.3 ”section 元 素 


section 元 素 用 于 对 网 站 或 应 用 程序 中 页 面 上 的 内 容 进行 分 块 。section 元 素 通 常 由 内 容 和 
标题 组 成 。 但 是 section 元 素 并 非 一 个 普通 的 容器 元 素 ， 当 一 个 容器 需要 被 直接 定义 样式 或 通 
过 脚本 定义 行为 时 ， 推 荐 使 用 div 元 素 ， 而 不 是 section 元 素 。 

在 使 用 section 元 素 时 ， 需 要 注意 以 下 三 点 。 

e@ 不 要 将 section 元 素 用 作 设 置 样式 的 页 面容 器 ， 那 是 div 元 素 的 工作 。 

®@ 如 果 article 元 素 、aside 元 素 或 nav 元 素 更 符合 使 用 条 件 ， 那 么 不 要 使 用 section 元 素 。 

e@ 不 要 为 没有 标题 的 内 容 区 块 使 用 section 元 素 。 

【 例 2-4] 

在 上 节 article 元 素 示 例 的 基础 上 添加 代码 ， 使 用 section 元 素来 显示 文章 的 评论 信息 ， 这 

些 评论 信息 作为 一 个 独立 的 区 域 进 行 显示 。 部 分 代码 如 下 : 
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<section class="parent"> 
<article class="comment"> 
<div class="comment-author"> <img src="images/comment/1.jpg" > </div> 
<div class="comment-content"> 
<h4 class="author-name"> 小 白菜 </h4> 
<span class="comment-date"> <span class="entry-date"> 
<time datetime="12-02-2018">Feb 12, 2018</time> 
</span> </span> 
<p> 网 站 做 得 不 错 ， 资 料 挺 多 的 ， 希 望 越 办 越 好 。 加 油 ! </p> 
</div> 
</article> 
</section> 
< 上 -其 他 评论 也 使 用 相同 的 section 元 系 -> 
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在 浏览 器 中 运行 上 述 代 


[EJEIEL 


VD mm :sse x 全 汪 


码 查看 效果 ， 如 图 2-5 所 示 。 


PS 
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Q 


hae 


人 2.3.4 aside 元 素 


aside 元 素 用 来 表示 当前 页 面 或 者 文章 的 ， 

属 信息 ， 可 以 As 二 二 磺 而 或 二 要 后 | 
i 侧 边 栏 、 、 导 航 条 ， 以 : 
及 其 他 类 似 的 有 别 了 es 一 般 | 
情况 下 ，aside 元 素 有 以 下 两 种 用 法 。 | 

® 被 包含 在 article 元 素 中 作为 主要 内 容 ; 
的 附属 信息 ， 其 中 的 内 容 可 以 是 与 当 ; 
前 文章 有 关 的 参考 资料 、 名 词 解释 等 。 ; 
在 article 元 素 之 外 使 用 ， 作 为 页 面 或 ; 
站 点 全 局 的 附属 信息 。 典 型 的 形式 是 ; 
侧 边栏 ， 其 中 的 内 容 可 以 是 友情 链接 、 
博客 中 其 他 文章 列表 和 广告 单元 等 。 

【 例 2-5】 

下 面 通过 aside 元 素 实现 博客 右 侧 的 栏目 ， 
内 容 。 首 先 使 用 aside 元 素 定义 一 个 显示 当前 | 
博客 内 容 分 类 的 栏目 ， 代 码 如 下 : : 


<aside class="widget widget_categories"> 
<h3 class="widget-title"> Blog Categories </h3> 
<ul class="category-list"> 
<li><a href="#" >Web Design</a></li> 


| 在 HTMLS 中 ,article 元 素 可 以 看 作 是 一 种 特殊 的 section 元 素 ,但 它 比 section 元 素 更 强调 独立 性 ，| 
即 section 元 素 强调 分 段 或 分 块 , 而 article 强调 独立 性 。 具 体 来 说 ， 如果 一 块 内容 相 对 来 说 比较 独立 、| 
| 完 吾 ， 应 该 使 用 article 元 素 ， 但 是 如 果 想 要 将 一 块 内 容 分 成 多 段 ， 应 该 使 用 section 元 素 。 | 


| 文章 归档 的 栏目 ， 代 码 如 下 


<li><a href="#" >Graphic Design</a></li> 
<li><a href="#" >e-Commerce</a></li> 
<li><a href="#" >Flash Animation</a></li> 
<li><a href="#" >Wordpress Theme</a></li> 
<li><a href="#" >HTML 5/CSS 3</a></li> 
<li><a href="#" >Coding</a></li> 
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</ul> 
</aside> 


接 下 来 使 用 aside 元 素 定义 一 个 表示 博客 


<aside class="widget widget_archive"> 
<h3 class="widget-title"> Archives </h3> 
<ul class="archive-list"> 
<li><a href="#">April 2015 <span 
class="count">05</span></a> </li> 
<li><a href="#">March 2015 <span 
class="count">35</span></a> </li> 
<li><a href="#">February 2015 <span 


class="count">15</span></a> </li> 
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</ul> 
</aside> 
在 浏览 器 中 运行 上 述 代码 ， Se = 


¢ > © D Ale//D/HtmlSpace/code2/3/blog.htmi#latest-post 


效果 如 图 2-6 所 示 。 其 中 的 TAG 
CLOUDS 栏目 也 是 使 用 aside 元 素 
定义 的 。 


BLOG CATEGORIES 


TAG CLOUDS 


ARCHIVES 
HTML5 简介 


图 2-6 aside 元 素 示例 


叫 )》2.3.5 footer 元 素 

footer 元 素 很 容易 理解 ， 它 可 以 作为 其 上 层 父 级 内 容 区 块 或 者 一 个 根 区 块 的 脚注 。 它 通 
常 包含 相关 区 块 的 脚注 信息 ， 例 如 作者 、 相 关 阅 读 链接 及 版 权 信息 等 。 在 HTMLS5 出 现 之 前 ， 
通常 使 用 <div id="footer"></div> 标记 来 实现 ，HTML 5 出 现 之 后 ， 可 以 直接 使 用 footer 元 素 
来 代替 刚才 的 内 容 。 

footer 元 素 与 header 元 素 一 样 ， 一 个 页 面 中 可 以 使 用 多 个 footer 元 素 。 同 时 ， 可 以 为 
article 元 素 或 者 section 元 素 添加 footer 元 素 。 

【 例 2-6】 
下 面 的 代码 是 在 页 面 的 底部 使 用 footer 元 素 显示 版 权 信息 : 
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<footer> 
<p class="xy_footer_p1"><span>POWERED by TGtech</span> 滨海 市 糖果 网 络 科 技 有 限 公 司 </p> 


</footer> 


97) 2.4 节点 元 素 


HIMLS 在 页 面 区 域 的 划分 上 增加 了 很 多 元 素 ， 使 用 这 些 元 素 可 以 更 加 清晰 地 对 节点 按 
内 容 或 者 段 进行 归 类 ， 如 使 用 nav 元 素 划 分 一 组 导航 链接 等 。 


吓 》2.4.1 nav 元 素 

nav 元 素 是 一 个 可 以 用 作 页 面 导航 的 容器 ， 其 中 的 导航 元 素 用 于 链接 其 他 页 面 或 当前 页 
面 的 其 他 部 分 。 并 不 是 所 有 的 链接 都 要 放 进 nav 元 素 中 ， 只 需要 将 主要 的 、 基 本 的 链接 放 进 
nav 元 素 中 即 可 。 
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一 个 HTML 网 页 中 可 以 包含 多 个 nav 元 。 页 内 导航 ， 它 的 作用 是 在 本 页 面 几 个 
素 ， 作 为 页 面 整体 或 者 不 同 部 分 的 导航 。 具 主要 的 组 成 部 分 之 间 进行 跳 转 。 
体 来 说 ，nav 元 素 可 用 于 以 下 几 个 场合 。 。 翻 页 操作 ” 翻 页 操作 是 指 在 多 个 页 面 
。 传统 导航 条 ”目前 主流 网 站 上 都 有 不 的 前 后 页 或 博客 网 站 的 前 后 文章 之 间 
同 层级 的 导航 条 ， 其 作用 是 将 当前 页 滚动 。 
面 跳 转 到 网 站 的 其 他 主要 页 面 。 【 例 2-7] 
。 侧 边栏 导航 目前 主流 博客 网 站 及 商 几乎 所 有 的 网 站 都 少不了 导航 条 。 下 
品 网 站 上 都 有 侧 边栏 导航 ， 其 作用 是 面 的 示例 代码 通过 nav 元素 定义 了 一 个 导 
将 页 面 从 当前 文章 或 当前 商品 跳 转 到 ， 航 条 。 
其 他 文章 或 其 他 商品 页 面 。 


<nav id="menu" class="menu collapse navbar-collapse"> 
<ul id="headernavigation" class="menu-list nav navbar-nav"> 
<li class="active"><a href="./"> 首页 </a></li> 
<li><a href="#about"> 视频 教学 </a></li> 
<li><a href="#portfolio"> 参考 手册 </a></li> 
<li><a href="#services"> 实例 教程 </a></li> 
<li><a href="#latest-post"> 寻求 帮助 </a></li> 
<li><a href="#contact"> 在 线 测 试 </a></li> 
</ul> 
</nav> 


上 述 代码 在 nav 元 素 中 添加 了 ul 元 素 作为 导航 菜单 容器 ， 每 个 1 元 素 表示 一 个 菜单 。 在 
浏览 器 中 运行 上 述 代码 ， 效 果 如 图 2-7 所 示 。 
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吓 》2.4.2 hgroup 元 素 


hgroup 元 素 用 于 将 多 个 标题 〈 主 标题 和 副标题 或 者 子 标题 ) 组 成 一 个 标题 组 。hgroup 元 
素 扮演 着 可 以 包含 一 个 或 者 更 多 与 标题 相关 的 容器 的 角色 。 
在 使 用 hgroup 元 素 时 要 注意 以 下 几 点 。 
@ 如 果 只 有 一 个 标题 元 素 ( hl ~ h6 中 的 一 个 ) ， 不 建议 使 用 hgroup 元 素 。 
e@ 当 出现 一 个 或 者 一 个 以 上 的 标题 与 元 素 时 ， 推 荐 使 用 hgroup 元 素 作为 标题 的 容器 。 
@ 当 有 一 个 标题 有 副标题 、 其 他 section 或 者 article 的 元 数据 时 ， 建 议 将 hgroup 元 素 和 元 数 
据 放 在 一 个 单独 的 header 元 素 容器 中 。 
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通常 将 hgroup 元 素 放 在 header 元 素 中 ， 


3 : </hgroup> 
下 面 是 一 个 简单 的 示例 : | </header> 
<header> | 示 为 运 符 
如 图 2-8 所 示 为 运行 效果 。 
<hgroup> | 
<h2> HTML 5 快速 入 门 </h2> | A eode /Aner im 


<h3 id="welcome"> HTML 5 简介 </h3> | HTML 5 基 夺 禾 各 lL 5 快速 入 门 
<p> 本 教程 将 介绍 HTML 5 的 方 方 面 ; ry Hm sm 
面 。</p> | ML 5 的 方方面面 。 


! 图 2-8 hgroup 元 素 示例 
如 下 所 示 为 使 用 hgroup 元 素 作为 标题 容器 的 代码 。 


<hgroup> 
<figcaption class="left-nav-title"><font style=" font-size:16px;"> 标题 组 一 </font></figcaption> 
<ul> 
<liclass="left-nav-group"><a href="#"> 菜单 链接 5-3</a></li> 
<li class="left-nav-group"><a href="#"> 菜单 链接 5-4</a></li> 
<liclass="left-nav-group"><a href="#"> 菜单 链接 5-5</a></li> 
<liclass="left-nav-group"><a href="#"> 菜单 链接 5-6</a></li> 
<liclass="left-nav-group"><a href="#"> 菜单 链接 5-3</a></li> 
<liclass="left-nav-group"><a href="#"> 菜单 链接 5-4</a></li> 
<liclass="left-nav-group"><a href="#"> 菜单 链接 5-5</a></li> 
<ji class="left-nav-group"><a href="#"> 菜单 链接 5-6</a></li> 
</ul> 
</hgroup> 


川 ) 2.4.3 address 元 素 


address 元 素 用 来 表示 离 它 最 近 的 article 或 body 元 素 内容 的 联系 信息 , 例如 文章 作者 名 字 、 
网 站 设计 和 维护 者 的 信息 。 当 address 的 父 元 素 是 body 时 ， 也 可 表示 该 文档 的 版 权 信 息 。 但 
是 要 注意 ，address 元 素 并 不 适合 所 有 需要 地 址 信息 的 情况 ， 例 如 客户 的 联系 信息 就 不 需要 。 

在 address 元 素 中 不 能 包含 标题 、 区 块 内 容 、header、footer 或 address 元 素 。 通 常 将 
address 元 素 和 其 他 内 容 一 起 放 在 footer 元 素 中 。 

下 面 再 来 看 一 个 结合 使 用 address 与 footer 的 示例 ， 代 码 如 下 : 


<footer> 
<address> 当 使 用 本 站 时 , 代表 您 已 接受 了 本 站 的 使 用 条 款 和 隐私 条 款 。 版 权 所 有 , 保留 一 切 权利 。 
</address> 
<p> 赞助 商 ， 滨海 糖果 科技 有 限 公司 ” 京 ICP 备 06000100 号 </p> 


</footer> 


在 上 述 代 码 中 , address 元 素 定义 了 文档 的 版 权 信 息 , 显示 在 页 面 底部 , 效果 如 图 2-9 所 示 。 
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图 2-9 address 元 素 示例 


Q 2.5 语义 元 素 


语义 元 素 是 指 能 够 为 浏览 器 和 开发 者 清楚 描述 其 意义 的 元 素 。 例 如 ， 可 以 将 header 和 
footer 等 元 素 看 作 语 义 元 素 ， 而 div 则 属于 无 语义 元 素 。 

HTML5 中 新 增 的 文本 语义 元 素 主要 有 : mark 元 素 、cite 元 素 、ruby 元 素 、 rt 元 素 、Ip 元素 、 
time 元 素 以 及 wbr 元 素 ， 下 面 依次 介绍 它们 。 


叫 》 2.5.1 mark 元 素 


mark 元 素 表示 页 面 中 需要 突出 显示 或 者 高 亮 显 示 ， 对 于 当前 用 户 具 有 参考 作用 的 一 段 文 
字 。mark 元 素 通常 作用 在 两 个 方面 : 一 方面 是 对 网 页 全 文 检 索 某 个 关键 词 时 显示 的 检查 结果 ， 
目前 许多 搜索 引擎 使 用 其 他 方法 实现 该 元 素 所 达到 的 功能 ， 另 一 方面 是 在 引用 原文 时 ， 为 了 
某 种 特殊 目的 而 把 原文 作者 没有 重点 标示 的 内 容 给 标示 出 来 。 

在 HTML4 中 ， 虽 然 也 可 以 使 用 em 元 素 或 者 strong 元 素 突出 显示 文字 ， 但 是 mark 元 素 
的 作用 是 与 它们 有 区 别 的 ， 不 能 混合 使 用 。 下 面 分 别 对 mark、strong 和 em 元 素 进行 说 明 。 

® mark 元 素 与 原文 作者 无 关 ， 或 者 说 它 不 是 原文 作者 用 来 标示 文字 的 ， 而 是 在 后 来 引用 时 

添加 上 去 的 ， 其 目的 是 吸引 用 户 的 注意 力 ， 提 供用 户 参 考 ， 希 望 对 用 户 有 所 帮助 。 
e strong 元 素 是 原文 作者 用 来 强调 一 段 文字 的 重要 性 而 使 用 的 ， 例 如 警告 信息 。 
e ”em 元 素 是 作者 为 了 突出 文章 重点 而 使 用 的 。 
【 例 2-8】 
下 面 是 一 个 文章 列表 ， 假 设 要 强调 “英语 ”和 “外 语 ”, 可 以 使 用 mark 元 素来 实现 。 代 码 如 下 : 
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<ul class="newslist1"> 

<li><span class="right hui f10">2017-11-11</span><a href="view.html"> 中 国 打破 了 世界 软件 巨头 规则 
</a></li> 

<li><span class="right hui f10">2017-11-11</span><a href="view.html"> 口语: 会 说 中 文 就 能 说 
<mark> 英语 </mark> ! </a></li> 

<li><span class="right hui f10">2017-11-11</span><a href="view.html"> 农场 摘 菜 不 如 在 线 学 <mark> 
外 语 </mark> 好 玩 </a></li> 

<li><span class="right hui f10">2017-11-11</span><a href="view.html"> 数理 化 老师 竟 也 看 学 习 资 料 ? 


</a></li> 


<li><span class="right hui f10">2017-11-11</span><a href="view.html"> 学 <mark> 英 语 </mark> 送 


ipad2,45 天 突破 听 说 </a></li> 
<li><span class="right hui f10">2017-11-11</span><a href="view.html"> 学 <mark> 外 语 </mark>， 上 
北 外 ! </a></li> 
</ul> 
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在 浏览 器 中 运行 上 述 代 码 ， 效 果 如 图 2-10 所 示 。 


DD mim x 
€ 3 © Dfle//D/Htmispace/code2/5/news htmi 


图 2-10 mark 元 素 示 例 


叫 )》 2.5.2 _ cite 元素 

cite 元 素 可 以 创建 一 个 引用 标记 ， 用 作文 档 中 参考 文献 的 引用 说 明 ， 如 书 名 或 文章 名 称 。 
使 用 cite 元 素 定义 的 内 容 会 以 斜体 显示 ， 以 区 别 于 文档 中 的 其 他 字符 。 

示例 代码 如 下 : 

<h3> 新 华 网 新 闻 </h3> 


<p> 北京 上 海 等 地 银行 房贷 利率 现 折扣 优惠 </p> 
<p> --- 引 自 << <cite> 新 华 网 </cite> >> ---</p> 


上 述 代码 运行 效果 如 图 2-11 所 示 。 


北京 上 灼 每 地 急行 房 生 肌 府 现 折 扣 优 可 
引 自 < 新 2 
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图 2-11 cite 元 素 示例 


叫 )》2.5.3 time 元 素 

time 元 素 用 于 定义 公历 的 时 间或 日 期 ， 时 间 和 时 区 偏 移 是 可 选 的。 该 元 素 能 够 以 机 器 可 
读 的 方式 对 日 期 和 时 间 进 行 编码 。 例 如 ， 用 户 代 理 能 够 把 生日 提醒 或 排 定 的 事件 添加 到 用 户 
量程 表 中 ， 搜 索引 擎 也 能 够 生成 更 智能 的 搜索 结果 。 

datetime 和 pubdate 是 time 元 素 常 用 的 两 个 属性 。datetime 属性 指定 日 期 / 时间， 否则 ， 
由 元 素 的 内 容 给 定 日 期 /时 间 ; pubdate 属性 指定 time 元 素 中 的 日 期 /时 间 是 文档 (或 article 
元 素 ) 的 发 布 日 期 。 

【 例 2-9】 

虽然 ， 目 前 所 有 的 主流 浏览 器 都 支持 time 元 素 ， 但 是 该 元 素 在 任何 浏览 器 中 都 不 会 呈现 
(属于 隐藏 元 素 )。 如 下 代码 演示 了 time 元 素 的 基本 使 用 方法 。 


<p> 我 们 在 每 天 早上 <time>9:00</time> 开始 营业 。</p> 
<p> 我 在 <time datetime="2018-02-14"> 情人 节 </time> 有 个 约会 。</p> 
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叫 》 2.5.4 wbr 元 素 


wbr 全 称 是 Word Break Opportunity, wbr 元 素 用 于 指定 在 文本 中 的 何 处 适合 添加 换行 符 。 
如 果 单 词 过 长 ， 或 者 开发 者 担心 浏览 器 会 在 错误 的 位 置换 行 ， 那 么 可 以 使 用 wbr 元 素来 添加 
单词 换行 的 占 位 符 。 

【 例 2-10】 

wbr 元 素 的 使 用 也 非常 简单 ， 下 面 代码 演示 了 该 元 素 的 基本 使 用 。 


<nobr> 此 行文 本 不 会 断 行 ， 不 管 窗口 的 宽度 如 何 。</nobr> 
<nobr> 但 是 ， 本 行 如 果 <wbr> 窗口 的 宽度 太 小 的 话 ， 将 在 “如 果 ” 之 后 断 行 。</nobr> 


叫 )》 2.5.5 ruby、rt 和 rp 元 素 

ruby 定义 ruby 注释 ， 通 常 与 rt 各 元 素 一 块 使 用 。tt 元 素 定 义 ruby 注释 的 解释 ， 如 果 
浏览 器 不 支持 ruby 元 素 定义 的 内 容 ， 就 会 显示 呈 元 素 定义 的 内 容 。 

ruby 注释 是 中 文 注音 或 字符 ， 在 东亚 使 用 ， 显 示 的 是 东亚 字条 的 发 音 。ruby 元 素 
个 或 者 多 个 字符 (需要 一 个 解释 /发 音 ) 和 一 个 提供 该 信息 的 rt 元 素 组 成 ， 还 包括 可 选 的 
Ip 元 素 。 

【 例 2-11] 

mby、rt 和 1p 的 使 用 非常 简单 ， 下 面 通过 两 种 方式 演示 这 些 元 素 。 代 码 如 下 : 


<ruby> 

日 <rt><rp>(</rp> 厂 马 <rp>)</rp></rt> 
</ruby> 
<ruby> 

汉 <rt>ic</rt><rp> 五 笔 拼 写 : hc</rp> 
</ruby> 


外 )) 2.6 交互 元 素 


HTML5 是 一 些 独立 特性 的 集合 ， 它 不 仅 增加 了 许多 Web 页 面 特 征 ， 而 且 本 身 也 是 一 个 
应 用 程序 。 对 应 用 程序 而 言 ， 表 现 最 为 突出 的 就 是 交互 操作 。HIML5 新 增加 了 对 应 的 交互 
体验 元 素 ， 本 节 简 单 了 解 这 些 元 素 。 


叫 )》2.6.1 meter 元 素 

meter 是 HTML5 新 增 的 一 个 表示 度量 单位 的 元 素 ， 该 元 素 仅 用 于 已 知 最 大 和 最 小 值 的 度 
量 。 例 如 ， 显 示 硬 盘 容量 或 者 对 某 个 候选 者 的 投票 人 数 占 总 投票 人 数 的 比例 等 ， 都 可 以 使 用 
meter 元 素 。 

在 meter 元 素 的 开始 标记 和 结束 标记 之 间 可 以 添加 文本 ， 浏 览 器 不 支持 该 元 素 时 可 以 显 
示 标 记 之 间 的 文字 。 基 本 格式 如 下 : 


<meter> 浏览 器 不 支持 meter 元 票 </meter> 
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<meter> 标记 包含 多 个 属性 ， 如 表 2-2 显示 了 常用 的 6 个 属性 。 
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表 2-2 meter 元 素 的 常用 属性 


属性 名 称 说 明 
value 定义 min 和 max 之 间 的 值 ， 这 是 在 元 素 中 表示 出 来 的 实际 值 ， 默 认 值 为 0 
min 定义 允许 范围 内 的 最 小 值 ， 默 认 值 为 0。 该 属性 的 值 不 能 小 于 0 
定义 允许 范围 内 的 最 大 值 ， 默 认 值 为 1。 如 果 该 属性 的 值 小 于 min 属性 的 值 ， 那 么 把 
min 视 为 最 大 值 


定义 范围 内 的 下 限 值 ， 必 须 小 于 或 等 于 high 属性 的 值 。 如 果 该 值 小 于 min， 则 使 用 
min 作为 low 属性 的 值 


定义 范围 内 的 上 限 值 。 如 果 该 属性 值 小 于 low， 则 使 用 low 作为 high 的 值 ， 如 果 该 值 
大 于 max， 则 使 用 max 作为 high 属性 的 值 


optimum 最 佳 值 ， 其 值 必 须 在 min 属性 值 与 max 属性 值 之 间 ， 可 以 大 于 high 属性 值 


high 


【 例 2-12]】 
下 面 代码 通过 meter 元 素 表示 文章 的 热度 。 


<ul class="newslist1"> 
<li><span class="right hui f10"><meter low="69" high="80" max="100" optimum="100" value="92">A 
</meter> 2017-11-11</span><a href="view.html"> 中 国 打 破 了 世界 软件 巨头 规则 </a></li> 
<li><span class="right hui f10"><meter low="69" high="80" max="100" optimum="100" value="76">B 
</meter> 2017-11-11</span><a href="view.html"> 口语 : 会 说 中 文 就 能 说 <mark> 英语 </mark> ! </a></li> 
<li><span class="right hui f10"><meter low="69" high="80" max="100" optimum="100" value="59">A 
</meter> 2017-11-11</span><a href="view.html"> 农场 摘 菜 不 如 在 线 学 <mark> 外 语 </mark> 好 玩 </a></li> 


</ul> 
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运行 上 述 代 码 观 察 效 果 ， 如 图 2-12 所 示 。 本 于 * 


© |[D leyWDyHtmispace/code2/5ynews html 


如 图 2-12 显示 了 meter 元 素 的 默认 样式 ， 
如 果 不 使 用 该 元 素 的 默认 样式 ， 开 发 者 也 可 
以 自 定义 样式 。 例 如 ， 下 面 通过 样式 选择 器 
指定 CSS 样式 ， 如 下 代码 仅 适 用 于 Webkit 
内 核 的 浏览 器 。 内 容 如 下 : 


图 2-12 meter 元 素 初 始 效 果 


.newslist1 meter { -webkit-appearance: none; } 
.newslist1 ::-webkit-meter-bar { 
height: 1em; 
background: white; 
border: 1px solid black; 
} 
.newslist1 ::-webkit-meter-optimum-value { background: green; } /# 高 #/ 


.newslist1 ::-webkit-meter-suboptimum-value { background: orange; } J 
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.newslist1 ::-webkit-meter-even-less-good-value { background: blue; } J 人 
.newslist1 ::-moz-meter-bar { 

background: rgba(0,96,0,.6); 
} 


重新 运行 页 面 或 者 刷新 浏览 器 页 面 ， 自 
定义 效果 如 图 2-13 所 示 。 


1》2.6.2 ”progress 元 素 


progress 元 素 表示 一 个 任务 的 进度 ， 这 个 进度 可 以 是 不 确定 的 ， 只 是 表示 进度 正在 进行 ， 
但 是 不 清楚 还 有 多 少 工作 量 没有 完成 。 可 以 使 用 0 到 某 个 最 大 数字 (例如 100) 之 间 的 数字 
表示 进度 完成 的 情况 。 

progress 元 素 的 两 个 属性 可 表示 当前 任务 的 完成 情况 : value 属性 表示 已 经 完成 了 多 少 工 
作 量 ; max 属性 表示 总 共有 多 少 工作 量 ， 工 作 量 单位 是 随意 的 ， 不 用 指定 。 在 设置 属性 时 ， 
value 属性 和 max 属性 只 能 指定 为 有 效 的 浮 点 数 ，value 和 max 属性 的 值 必须 大 于 0，value 属 
性 的 值 要 小 于 或 等 于 max 属性 的 值 。 

【 例 2-13] 

下 面 演示 progress 元 素 的 两 种 用 法 。 第 一 个 progress 元 素 设置 value 和 max 属性 的 值 ， 
第 二 个 progress 元 素 只 设置 max 属性 的 值 ， 通 过 按钮 控制 进度 条 。 实 现 步骤 如 下 。 

园 友 在 HTML 页 面 中 添加 第 一 个 progress 元素 , 指定 该 元 素 的 max 属性 和 value 属性 的 值 。 
代码 如 下 : 
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<section> 

<h1>progress 元 标的 使 用 1</h1> 

<p><progress value="45" max="100"><span>45%</span></progress></p> 
</section> 


鸭 加 在 HTML 页 面 中 添加 第 二 个 progress 元 素 ， 指 定 该 元 素 的 max 属性 值 ， 然 后 添加 一 
个 按钮 ， 并 为 该 按钮 添加 onClick 事件 属性 。 代 码 如 下 : 


<section> 
<h1>progress 元 标的 使 用 2</h1> 
<p> 完成 百分比 : <progress id="p" max="100"><span>0</span>%</progress></p> 
<input type="button" onClick="button_click()" value=" 开始 " /> 


</section> 


辕 色 在 JavaScript 脚本 中 添加 button_click() 函数 ， 在 该 函数 中 定义 progress 元 素 的 值 。 


43 国 
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当 用 户 单 击 按钮 时 ，progress 元 素 就 会 自动 增长 ， 当 它 的 值 增长 到 100( 即 progress 元 素 的 
max 值 ) 时 ， 就 会 停止 增长 。JavaScript 脚本 代码 如 下 : 


<script type="text/javascript"> 
var newValue = 0; 
function button_click(){ 


var progressBar = document.getElementByld('p'); // 获取 页 面 中 的 progress 元 票 
newValue = 0; // 设置 newValue 


progressBar.getElementsByTagName!('span')[0].textContent = 0; 


区 setTimeout("updateProgress()",500); 
} 
工 function updateProgress(){ 
一 if(newValue>100){ 
FE4 return ; 
性 } 
ol var progressBar = document.getElementByld('p';); 
© progressBar.value = newValue; 
[gp) progressBar.getElementsByTagName!('span')[0].textContent = newValue; 
[¢p) setTimeout("updateProgress()",500); 
5 newValue++; 
CC } 
2 </script> 
W 看 难 在 浏览 器 中 运行 上 述 代 码 查看 效果 ， 如 图 2-14 显示 了 页 面 的 初始 效果 。 
9 大 旺 单 击 图 中 的 “开始 ”按钮 查看 进度 运行 效果 ， 如 图 2-15 所 示 。 
Kej 站 progressi 率 x i 
i 人 © DfileV/DVHtmlspace/codez/e/indexhtrq — 全 © DfileyWDVHtmlspace/codez/e/indexhtr 安 三 


progress 元 素 的 使 用 1 progress 元 素 的 使 用 1 
[| = 


progress 元 素 的 使 用 2 progress 元 素 的 使 用 2 
这 成 百分比， a 谨 成 百分比， 
i 到 


图 2-14 初始 效果 图 2-15 单 击 “开始 ”按钮 后 的 效果 


川 ) 2.6.3 details 元 素 


details 元 素 提 供 了 一 种 将 页 面 上 的 局 部 ; 素 ， 并 为 第 二 个 details 元 素 指 定 open 属性 。 
区 域 进行 展开 或 收缩 的 方法 ， 起 着 说 明文 档 ; 代码 如 下 : 
或 某 个 细节 信息 的 作用 。<details> 标记 经 常 : 


会 用 到 一 个 open 属性 ， 该 属性 定义 details 是 DS 2 
否 可 见 。 ! <details>HTML、XHTML、HTML 5</details> 


【 例 2-14]】 <p>HTML 5 组 织 </p> 


本 示例 在 页 面 中 分 别 添加 两 个 details 元 <details open="open">W3C、WHATWG</ 


details> 
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oY 
在 浏览 器 中 运行 上 述 代码 观察 效果 ， 一 嘿 i 
如 图 2-16 所 示 。 从 该 图 中 可 以 看 出 , 为 | sa 
<details> 标记 指定 open 属性 后 ， 页 面 在 运行 , 
时 会 自动 展开 显示 内 容 。 mea 


下 详细 信息 


HTML 5 基础 教程 


W3C. WHATWG 


图 2-16 details 元 素 的 使 用 


") 2.6.4 summary 元 素 


从 details 元 素 示例 的 效果 图 可 以 看 出 ， | 本 
details 元 素 只 添加 了 显示 的 内 容 ， 并 没有 为 | 和 
其 指定 标题 ， 这 时 浏览 器 会 提供 一 个 默认 的 | i 
标题 ， 即 “详细 信息 ”， 同 时 提供 一 个 类 似 | ee 
上 下 箭头 之 类 的 图 标 ， 单 击 该 图 标 可 以 进行 summary> 
展开 和 收缩 操作 。 如 果 要 为 detail 元 素 自 定 ， ee 
义 标题 ， 可 以 使 用 summary 元 素 。 | </details> 

【 例 2-15] 


更 改 上 述 示例 的 代码 ， 为 每 一 个 ， ”再 次 在 浏览 器 中 运行 页 面 查看 效果 ， 此 
details 元 素 添加 summary 元 素 ， 修 改 后 的 ; 时 可 通过 单 击 summary 元 素来 展开 或 者 收缩 


代码 如 下 : ; 操作 ， 如 图 2-17 所 示 。 
<p>HTML 5 发 展 过 程 </p> | «oC pe ee ee 
<details> : HTML 5 展开 入 
<summary> 简 述 HTML5 的 发 展 过 程 ， a rn 
</summary> | ES 一 一 HTML 5 让 
HTML、XHTML、HTML5 : HTML 9 和 与 HTML 5 有 关 的 组 织 


W3C、 WHATWG 


图 2-17 ” summary 为 details 元 素 指定 标题 


i 


1 
| HTML5 中 新 增 了 多 个 交互 元 素 ， 除 了 本 节 介绍 的 几 个 元 素 外 ，command 元 素 和 dialog 元 素 部 | 
| 可 以 看 作 是 交互 元 素 。 但 是 ， 目 前 还 没有 浏览 器 提供 对 它们 的 支持 ， 因 此 这 里 不 再 进行 详细 介绍 。 | 


人 


Q7) 2.7 全 局 属性 


全 局 属性 是 指 在 任何 元 素 中 都 可 以 使 用 的 属性 。 与 之 前 的 版 本 相 比 ，HTML 5 也 增加 了 
多 个 全 局 属性 ， 其 中 常用 的 全 局 属性 有 hidden、spellcheck 和 contenteditable。 下 面 依次 介绍 
它们 的 用 法 。 
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叫 )》 2.7.1 hidden 属性 


hidden 是 HIMLS 新 增 的 一 个 属性 ， 该 属性 类 似 于 hidden 类 型 的 mput 元 素 ， 功 能 是 通 

知 浏览 器 不 显示 该 元 素 ， 使 元 素 处 于 不 可 见 状态 ， 但 是 元 素 中 的 内 容 浏 览 器 是 已 知 。 页 面 加 

载 后 允许 使 用 JavaScript ee 取消 后 该 元 素 变 为 可 见 状态 ， 同 时 元 素 中 的 内 

容 会 及 时 显示 出 来 。hidden 是 一 个 布尔 值 的 属性 ， 当 将 属性 值 设置 为 true 上 时， 元素 处 于 不 可 

见 状态 ， 当 属性 值 设置 为 false 元 素 处 于 可 见 

【 例 2-16] 

世 本 示例 通过 p 元 素 显示 一 段 文 本 ， 并 通过 hidden 属性 将 这 段 文本 隐藏 ， 当 用 户 生 
中 的 按钮 时 可 以 显示 内 容 。 

园 友 在 网 页 的 合适 位 置 添加 div 元 素 并 添加 hidden 属性 。 部 分 代码 如 下 : 


伺 
[= 
0 


页 面 


<h3 id="welcome"> HTML 5 简 介 <input style="width:50px" type="button" id="btn" value=" 显 示 " 
‘onClick="show()" /></h3> 

<div hidden id="h5_div"> 

<p> 本 教程 将 介绍 HTML 5 的 方方面面 。</p> 

<p>HTML 5 将 成 为 HTML、XHTML 以 及 HTML DOM 的 新 标准 。</p> 

</div> 


加 区 添加 一 段 JavaScript 脚本 ， 脚 本 内 容 用 于 显示 或 者 隐藏 p 元 素 中 指定 的 内 容 。 代 码 如 下 : 


<script> | }else{ 
var btn = document.getElementByld("btn"); | btn.value=" 显示 "; 
function show(){ | p.hidden = true; 
var p = document.getElementByld("h5_div"); | } 
if(btn.value ==" 显示 "){ : 外 


了 
一 
三 
后 
a 
十 
O 
WU) 
0 
W 
十 
CO 
yy 
< 
中 
JU) 
O 
E 
[a 
> 


btn.value=" 隐藏 "; | </script> 
p.hidden = false; : 


罗 在 浏览 器 中 运行 本 示例 代码 进 和 测试 ， 如 图 2-18 所 示 为 单 击 “ 显 示 ” 按 钮 前 后 的 效果 。 


wm E 一 
生计 GD tie///O/Hemispace/code2/B/index html 3 © [G ieW/DYHmispace/code2/aindexhtml 


HTML 5 快 束 入门 4 HTML 5 快速 入 | 
HTWL 5 基础 才 各 a HTML 5 基础 才 程 


HTML 5 人 全 [IE HTML 5 人 


HTML 5 是 如 何 起 步 的 ? 二 输 简介 细 HTMLS 的 方方面面 
HTML 5 新 特性 ML 5 HTMLS 将 成 为 HTML、XHTML 以 及 HTML DOM 的 新 标准 


浏览 器 支持 HTML 5 是 如 何 起 步 的 ? 
: HTML 5 新 特性 


图 2-18 hidden 属性 示例 


叫 ) 2.7.2 contenteditable 属性 


contenteditable 属性 的 功能 是 允许 用 户 编辑 元 素 中 的 内 容 。 因 此 需要 注意 ， 元 素 必 须 是 可 
以 获得 鼠标 焦点 的 ， 而 且 在 鼠标 单 击 后 要 向 用 户 提供 一 个 插入 符号 ， 提 示 用 户 该 元 素 中 的 内 


值 设 置 为 true 或 false。 


contenteditable 属性 有 一 个 隐藏 的 inherit | 
状态 。 属 性 值 为 rue 时 ， 元 素 被 指 
定 为 允许 编辑 ， 属 性 值 为 false 时 ， 元 素 被 
指定 为 不 允许 编辑 ， 如果 没有 指定 tme 或 ; 
inherit 状态 来 决定 ， 如 果 元 素 的 | 


(继承 ) 


false， 则 F 
父 元 素 是 可 编辑 的 , 则 该 元 素 就 是 可 编辑 的 ， 
否则 为 不 可 编辑 。 


为 false。 
【 例 2-17]】 


码 如 下 : 


叫 ) 2.7.3 spellcheck 属性 
spellcheck 属 


下 面 通过 div 元 素 显示 一 段 文 本 ， 并 且 ; 
将 其 contenteditable 属性 的 值 设置 为 tue。 代 ， 
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容 人 允许 编辑 。contenteditable 属性 与 hidden 属 | 
性 一 样 ， 也 是 一 个 布尔 值 ， 可 以 将 该 属性 的 . 


<div contenteditable="true" > 
<p> 本 教程 将 介绍 HTML 5 的 方 方 面 
面 。</p> 
<p>HTML 5 将 成 为 HTML、XHTML 以 
及 HTML DOM 的 新 标准 。</p> 
</div> 


在 浏览 器 中 运行 上 述 代码 ， 在 网 页 中 单 


| 击 这 段 文字 并 进行 编辑 ， 编 辑 效果 如 图 2-19 
; 所 示 。 

另外 ， 除 了 contenteditable 属性 外 ， 还 有 和 
一 个 iscontenteditable 属性 。 当 元 素 可 编辑 时 ，: 
属性 值 为 tue， 当 元 素 不 可 编辑 时 ， 属 性 值 


CO 


5 快速 入 门 
HTML 5 简介 


HTWL 5 基 克 和 和 


本 要 本 村 介 司 HTML 5 的 方面 


jms 4m 为 HM 


HTML 5 表单 HTML 5 是 如 何 起 步 的 ? 


HTML 5 新 特性 


图 2-19 contenteditable 属性 编辑 效果 


是 HTMLS5 针对 input 元 素 与 textarea 元 素 这 两 个 文本 输入 框 提供 的 一 个 


新 属性 ， 其 功能 是 对 用 户 输入 的 文本 内 容 进行 拼写 和 语法 检查 。spellcheck 属性 的 值 为 布尔 类 
型 ， 在 书写 时 必须 将 属性 值 设置 为 tue 或 者 false。 


【 例 2-18] 


本 示例 演示 spellcheck 属性 的 使 用 方法 。 为 了 演示 该 属性 值 的 效果 ， 在 页 面 中 添加 两 个 
textarea 元 素 ， 分 别 指定 spellcheck 属性 的 值 为 true 和 false。 代 码 如 下 : 


spellcheck 属性 值 为 true: <br/><textarea row="10" cols="100" spellcheck="true"></textarea><br/> 
spellcheck 属性 值 为 false: <br/><textarea row="10" cols="100" spellcheck="false"></textarea> 


在 浏览 器 中 运行 本 示例 的 代码 并 输入 内 
容 进 行 测试 。 如 图 2-20 为 Chrome 浏览 器 的 
测试 效果 。 


“全 注意 -一 


| 了 spellcheck 属性 也 不 会 执行 拼写 检查 。 


D ma a = 
人 了 © [Cle//D/Hemispace/code2/10/index html 


HTML 5 共和 才 各 spelicheck 届 性 值 


如 果 为 元 素 指定 readOnly 属性 或 者 disabled 属性 ， 并 且 将 属性 值 设置 为 true 时 ， 则 即使 设置 
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9 7) 2.8 ”实践 案例 : 设计 旅游 网 站 首页 


HTMLS5 的 出 现 使 页 面 结构 更 加 清晰 、 表 达 的 语义 更 加 明确 ， 且 能 最 大 限度 地 保证 页 面 
的 简洁 性 ， 但 是 并 非 在 页 面 中 使 用 HTMLS5 元 素 越 多 越 好 。 在 本 节 之 前 已 经 通过 大 量 的 示例 
讲解 了 HIMLS 中 新 增加 的 全 局 属性 和 元 素 ， 如 header 元 素 、footer 元 素 、menu 元 素 、nav 
元 素 及 届 元 素 等 。 本 节 将 通过 常用 的 HIMLS 元 素 设计 网 站 首页 ， 加 深 读者 对 这 些 元 素 及 
HTMLS5 的 理解 。 

随 着 社会 经 济 的 不 断 发 展 ， 旅 游 越 来 越 成 为 大 家 放松 心情 的 一 个 选择 。 本 次 案例 就 使 用 
新 增加 的 HTML5 元 素 实现 设计 旅游 网 站 首页 的 功能 。 网 站 首页 的 内 容 非 常 简单 且 便 于 理解 ， 
其 最 终 运行 效果 如 图 2-21 所 示 。 

实现 网 站 首页 的 主要 步骤 如 下 。 

攻 划分 网 站 首页 的 页 面 区 域 ， 采 用 目前 比较 主流 的 框架 ， 将 整个 页 面 分 为 上 、 中 、 下 
三 个 大 的 区 域 ， 然 后 将 中 间 区 域 划分 为 左 、 中 、 右 3 个 部 分 。 页 面 的 整体 结构 框架 如 图 2-22 
所 示 。 


des 8 


再 且 忆 星河 四 


全: 
六 S 汪 和 项 和 动 ， 
放生 社 六 设 ; 日 和 
区 和， 更 大 区， 国 六 
区 二 让 芷 
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发 表 日 期 : 2017-10-12 证 论 数量 ; 23 顶部 区 域 


坦 号 旅游 日 从 蕊 为 中 外 旅 
诉求.。 


内 容 信息 


沟 各 宇 陡 
鞭 路 宣 计 


底部 区 域 


图 2-21 旅游 首页 最 终 效 果 图 2-22 页 面 划分 整体 结构 


辐 加 页 面 的 head 部 分 定义 meta 元 素 和 title 元 素 。meta 元 素 用 于 定义 页 面 的 编码 格式 ， 
title 元 素 定义 页 面 的 标题 。 具 体 代码 如 下 : 


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 快乐 一 夏 (旅游 网 )</title> 


加 呈 在 title 元 素 下 方 添加 两 个 link 元 素 ， 该 元 素 为 当前 页 面 引用 一 个 外 部 CSS 样式 表 ， 
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并 且 添 加 一 个 图 标 。 具 体 代码 如 下 : 


<link rel="stylesheet" href="styling.css" type="text/css" media="screen" /> 


<link rel="shortcut icon" href="img/favicon.ico" sizes="16X 16" /> 


加 允 上 面 的 基本 工作 完成 后 ， 对 顶部 区 域 进行 分 析 。 头 部 区 域 包含 图 片 、 导 航 菜单 和 搜 
索 框 等 内 容 ， 实 现 的 主要 代码 如 下 : 


<header> 


<div id="navcontainer" style=" height:auto;"> 


<div id="tagline"> <a href="#"> <br /><img src="img/blank.gif" alt="Your logo here" 


width="200" height: 


="110" /><br /></a> </div> 


<menu> 


<li><a accesskey="1" id="taba" href="index.html" class="active"> 首页 </a></li> 
<li><a accesskey="2" id="tabb" href="#"> 酒店 </a></li> 


<li><a accesskey="3" 


"tabc" href="#"> 团队 旅游 </a></li> 


<li><a accesskey="4" id="tabd" href="#"> 留言 </a></li> 


</menu> 


</div> 


<div id="tabbar"></div> 
<div id="search"> 


<form method="get" action=""> 
<table width="500px"><tr><td> 搜 索 的 关键 字 : <input type="text" spellcheck= 

"true" value="" class="tbox" /><input type="submit" value=" 搜索 " name="submit" /></td></tr></table> 
</form> 


<nav><li><a href="#"> 搜索 </a></li><li><a href="#"> 地 图 </a></li></nav> 


</div> 
</header> 


上 述 代码 中 
个 头 部 区 域 的 内 


首先 使 用 header 元 素 定义 整 ; 
容 ; 接着 将 menu 元素 和 1i :; 


元 素 相 结合 实现 


然后 创建 用 于 输入 的 HTML 表单 ， 在 该 表单 | 
输入 框 ， 指 定 该 输入 框 的 | 


中 添加 用 于 搜索 


首页 页 面 的 导航 列表 信息 ; 


spellcheck 属性 


法 ; 最 后 通过 na 


接 信 息 
加 号 为 项 部 区 域 的 相关 元 素 添 加 样式 ， 
主要 代码 如 下 : 
menu{ 
width: 100%; 


margin: 0 auto; 


padding: 0; 


于 检查 输入 的 内 容 是 否 合 
v 元 素 实 现 搜索 结果 的 超 链 


clear: both; 

} 

menu ul,menu, menu li{ 
margin: 0; 
padding: 0; 

} 

menuli{ 
float: left; 
display: block; 
width: 24.5%; 
min-height: 20px; 

1 

#search form { 


display: block; 


IJOSeABP+8SSI+91WMNLH 人 


1d 


中 


工 
一 
三 
三 
ol 
+ 
OO 
0 
0 
oo 
+ 
CC 
号 
性 
v9 
On 
O 
一 . 
Ee 
Ld 


HTMLS+C553+JavaScript 网 页 设计 入 门 与 应 用 


OC 


float: left; | padding: 0; 

text-align: right; | list-style: none; 

width: 70.5%; | } 

margin: 0 40px 0 0; : #search nav li{ 
} | font: 10px/140% Verdana, Arial, sans-serif; 
#search nav { : } 

margin: 0; | 


06》 使 用 footer 元 素 和 address 元 素 创 建 底部 区 域 ， 该 区 域 主要 显示 友情 链接 ， 其 中 
address 元 素 用 来 定义 文档 版 权 信息 。 其 主要 代码 如 下 : 


<footer> 

<div id="footmenu" style="border:1px solid none;"> <a href="#"> 公告 查看 </a> | <a href="#"> 
关于 我 们 </a> | <a href="#"> 联系 我 们 </a> | <a href=" 护 > 详细 地 图 </a> | <a href="#"> 加 入 我 们 </a> | <a 
href="#"> 搜索 </a> | <a href="#"> 隐私 协议 </a> | <a href="#"> 词汇 查看 </a> | <a href="#">RSS</a> </div> 

<address> 

版 权 所 有 ©2017 糖果 科技 有 限 公 司 <a href="http://validatorw3.org/check?uri=referer" 
title="Valid XHTML 1.1!">XHTML 1.1</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Valid 
CSS!">CSS 2.1</a>. 

</address> 


</footer 


到 为 底部 区 域 的 footer 元 素 和 addres 元 素 添 加 代码 ， 主 要 样式 如 下 : 


footer { 
width: autolimportant; 
background: #8ccc33 url("img/overburn2.gif") no-repeat center bottom; 
clear: both; 
position: relative; 
text-align: center; 
font-size: 10px; 
line-height: 0.9em; 
padding: 0; 
} 
footer a:hover { 
color: #1f5791!limportant; 
font-weight: boldlimportant; 
} 
address { 
padding: 5px 0; 
} 


加 根据 上 面 的 操作 步骤 ， 完 成 了 项 部 区 域 和 底部 区 域 相关 代码 和 样式 的 设计 ， 运 行 上 
面 的 代码 进行 测试 ， 运 行 效果 如 图 2-23 所 示 。 
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dS zh 


| Ea 


二 语 D2017 其 男 区 误 且 EXKHTML 1.1 1 CSS 2.1. 


图 2-23 顶部 区 域 和 底部 区 域 运 行 效果 
町 旷 中 间 区 域 是 整个 页 面 最 重要 的 部 分 ， 本 案例 的 中 间 区 域 分 为 左 、 中 和 右 3 个 部 分 。 
左 侧 部 分 主要 显示 快捷 列表 和 旅游 注意 事项 两 部 分 内 容 ， 该 部 分 页 面 的 具体 代码 如 下 : 


工 

一 

<div id="left"> 三 
<h1> 快捷 列表 </h1> a 
<div id="sidemenu"> 3 
<ul> © 
<li><a href="#"> 酒店 列表 </a></li><li><a href="#"> 美 图 列表 </a></li> 六 

<li><a href="#"> 散 客 参 团 </a></li><li><a href="#"> 客户 留言 </a></li> CD 

<li><a href="#"> 旅游 热线 </a></li> 2 

</ul> Ey 

</div> < 
<br class="clear" /> DD 
<h1> 旅游 注意 事项 </h1> OO 
<div> 2 
区 


<ol style="margin-left:-20px;" start="1"> 
<li><a href="#"> 外 出 旅游 牢记 八 要 </a></li> 
<li><a href="#"> 旅游 时 出 现 紧急 情况 怎么 办 </a></li> 
<li><a href="#"> 如 何 选择 旅游 方式 </a></li> 
<li><a href="#"> 出 游 干 万 别 忘 了 防晒 </a></li> 


</ol> 
</div> 
</div> 


上 述 代 码 中 添加 了 两 个 div 元 素 ， 分 别 用 于 显示 快捷 方式 列表 和 旅游 注意 事项 。 第 一 个 
div 元 素 中 使 用 ul 生 元 素 显示 无 序列 表 ， 第 二 个 div 元 素 中 使 用 ol 和 开元 素 显 示 有 序列 表 ， 
设置 ol 元 素 的 start 属性 值 从 1 开始 。 

曾 加 为 左 侧 内 容 的 不 同 元 素 添加 样式 ， 样 式 的 主要 代码 如 下 : 


#left { 
width: 160px; 
float: left; 
background: #f6f6f6 url("img/bg_left.gif") no-repeat center bottom; 
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color: #555; | list-style: none; 
border-right: 1px solid #ccc; | width: 140px; 
font-size: 11px; : margin: 0 0 10px 0; 
text-align: left; | padding: 0; 
line-height: 14px; : } 
height: 60%; /* Height Hack 3/3 */ | #sidemenu li{ 
} : margin-bottom: 0; 
#sidemenu ul { | 时 


画 雄 中 间 区 域 的 中 间 部 分 主要 显示 旅游 的 一 些 文章 内 容 ， 其 主要 代码 如 下 : 


<article> 
<section> 
<h1> 夏季 外 出 旅游 五 注意 <span style="font-size:13px; font-weight:normal;"> 热度 : <meter 
value="8" min="0" max="10" low="6" high="8" title="8 分 " optimum="10"></meter></span></h1> 
<p>&nbsp;&nbsp;&nbsp;&nbsp; 炎炎 夏 日 仍然 挡 不 住 外 出 <mark> 旅游 </mark> 的 人 的 热 
情 ， 那 么 在 这 个 炎热 的 夏季 外 出 <mark> 旅游 </mark> 要 注意 些 什么 呢 ?</p> 
<ol> 
<li> 炎热 的 夏天 不 宜 长 时 间 做 日 光 浴 ， 野 外 活动 要 涂 防 晒 油 ， 戴 上 遮阳 帽 和 墨 
镜 </li> 
<!-- 省 略 其 他 代码 的 显示 --> 
</ol> 
<p align="right">--- 摘 选 自 <cite>《 新 疆 旅游 网 ) </cite></p> 
<p><time pubdate datetime="2017-10-13"> 发 表 日 期 ，2017-10-12</time> 评论 数量 : 23</p> 
</section> 
<section> 
<h2> 一 起 走 进 中 国 十 大 避暑 旅游 城市 <span style="font-size:13px; font-weight:normal;"> 热 
度 : <meter value="6" min="0" max="10" low="6" high="8" title="8 分 " optimum="10"></meter></span></h2> 
<p>&nbsp;&nbsp;&nbsp;&nbsp;<aside> 酷热 的 盛夏 ,清凉 何 处 寻 ? 炎炎 夏 日 ， 避 里 
<mark> 旅游 </mark> 日 益 成 为 中 外 <mark> 旅游 </mark> 者 ， 远 足 出 行 选择 目的 地 的 首要 诉求 。</aside> 
<!- 省 略 其 他 代码 的 显示 --> 
</p> 
<p align="right"><time pubdate datetime="2017-10-13"> 发 表 日 期 ，2017-10-12</time> 评论 
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数量 : 15 </p> 
</section> 


</article> 


上 述 代码 中 首先 通过 article 元 素 声明 中 间 整 体内 容 ， 然 后 在 该 元 素 中 添加 两 个 section 元 
素 ， 这 两 个 元 素 分 别 表示 两 篇 文章 信息 。 每 个 section 元 素 中 都 使 用 meter 元 素 形容 当前 文章 
的 评价 ; mark 元 素 高 亮 处 理 关键 字符 “旅游 ”; time 元 素 显示 当前 文章 的 发 布 时 间 。 第 一 个 
section 元 素 中 将 ol 和 开元 素 相 结合 实现 无 序列 表 ， 使 用 cite 元 素 标 记 文 章 内 容 的 出 处 ;第 二 
个 section 元 素 中 使 用 aside 元 素 显示 文章 标题 的 附属 内 容 。 

加 区 为 文章 内 容 的 相关 元 素 添加 样式 ， 主 要 样式 代码 如 下 : 
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一 -一 


安排 商务 考察 、 学 术 交 流 、 探 险 、 文 化 教育 、 体 


article { 
width: 460px; 育 比 赛 、 文 艺 演出 等 专项 活动 。 旅 行 社内 设 : 日 
height: auto; 韩 部 、 欧 美 部 、 亚 大 部 、 国 内 部 、 海 外 部 。</p> 
float: left; 2 
background: #fff; </div> 
color: #666; 


| 国 台 为 中 间 区 域 右 侧 部 分 的 内 容 添 加 样 
| 式 ， 具 体 样式 代码 如 下 : 


line-height: 16px; 
letter-spacing: 1px; 


text-align: left; | #right { 
} | width: 150px; 
cite{ | float: right; 
color:blue; | background: #eee url("img/bg_right.gif”) 
} no-repeat center bottom; 
aside{ ! line-height: 14px; 
margin-left:20px; | color: #444; 
color:blue; | font-size: 11px; 
} text-align: left; 
a height: 60%; 
四 中 间 区 域 右 侧 的 代码 非常 简单 ， 主 : } 
要 显示 夏 日 旅行 社 的 简单 信息 。 具 体 代 码 | #rc{ 
如 下 : : padding: 10px; 
<div id="right"> } 
<div id="rc"> a 
<h1> 夏 日 旅行 社 </h1> padding: 0 0 10px 2px; 
} 


夏 日 旅行 社 是 河南 省 今年 刚刚 成 立 的 一 家 新 型 旅 


行 社 ， 


组 织 中 国 公 民 境 内 旅游 ， 承 办 各 种 会 议 、 展 览 ， 


厂 SS 
3 


<p> &nbsp;&nbsp;&nbsp;&nbsp; 
本 节 项 目 案例 主要 通过 HIML5 中 的 常 


用 元 素 设计 旅游 首页 页 面 ， 到 目前 为 止 ， 本 
案例 构建 旅游 首页 的 内 容 已 经 完成 。 


主要 从 事 招徕 和 接待 境外 旅游 者 来 华 观光 ， 


2.9 练习 题 


一 、 填 空 题 

1. 在 HTML5 的 页 面 中 所 有 元 素 的 根 元 素 是 

2. 新 增 的 元 素 用 于 定义 文档 中 的 头 部 信息 。 

3. head 元 素 中 定义 页 面 辅助 信息 的 是 元 素 。 

4. time 元 素 有 两 个 常用 属性 ， 分 别 是 属性 和 pubdate 属性 。 

5. details 元 素 提 供 了 将 页 面 上 的 局 部 区 域 进行 展开 或 收缩 的 方法 ， 它 需要 通过 
元 素来 设置 标题 。 

6. HTML5 使 用 元 素 定 义 正在 完成 的 进度 条 。 
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7. spellcheck 属性 的 值 为 “时 表示 启用 输入 时 的 拼写 检查 。 
二 、 选 择 题 

1. 下 面 关于 nav 元 素 的 说 法 ， 选 项 是 不 正确 的 。 

人 A. nav 元 素 可 以 作为 传统 的 导航 条 

B. nav 元 素 可 用 于 侧 边 栏 导 航 

C. menu 元 素 和 footer 元 素 都 可 以 用 来 替换 nav 元 素 

D. 页 内 导航 和 翻 页 操作 时 都 可 以 使 用 nav 元 素 

2. progress 元 素 常用 的 两 个 属性 是 。 

A. min 和 max B. low 和 high 

C. value 和 min D. value 和 max 

3. HTML5 中 新 增 的 属性 允许 用 户 编辑 元 素 中 的 内 容 。 
A. spellcheck B. contextmenu 

C. contenteditable D. hidden 

4. meter 元 素 的 属性 用 于 定义 范围 内 的 最 佳 值 。 

A. optimum B. value 

C. low D. high 


上 机 练习 : 设计 博客 网 站 首页 


如 图 2-24 所 示 为 一 个 博客 类 网 站 的 首页 效果 ， 页 面包 含 头 部 、 中 间 区 域 和 底部 3 个 模块 ， 
其 中 头 部 又 包含 主 标题 、 副 标题 和 导航 链接 ， 中 间 区 域 又 包含 主要 内 容 区 和 右 侧 边栏 区 。 

读者 可 以 根据 效果 图 添加 合适 的 元 素 ， 如 header 元 素 、footer 元 素 、hgroup 元 素 、nav 
元 素 和 section 元 素 等 。 (提示 : 不 必 全 部 使 用 本 章 所 介绍 的 元 素 ， 但 是 要 优先 考虑 HTML5 
新 增 的 元 素 。) 
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图 2-24 博客 类 网 站 的 首页 效果 


表单 和 表单 元 素 的 主要 作用 就 是 收集 用 户 输入 的 内 容 ， 当 用 户 提交 表单 时 ， 这 些 内 容 将 
被 作为 请 求 参数 提交 到 服务 器 。 

HTML5 与 HTML4 相 比 ， 在 表单 方面 进行 了 改进 ， 不 仅 增加 了 与 表单 有 关 的 元 素 ， 还 增加 
了 与 表单 和 表单 域 有 关 的 输入 类 型 ， 本 章 将 介绍 HTML5 表单 的 使 用 。 

通过 本 章 的 学 习 ， 读 者 不 仅 可 以 熟悉 表单 的 基本 结构 ， 还 可 以 掌握 HTML5 中 新 增 的 有 关 
表单 的 元 素 、 属 性 和 输入 类 型 ， 能 够 通过 使 用 HTML 表单 的 内 容 熟练 地 构建 HTML 页 面 。 
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表单 可 以 用 来 在 网 页 上 显示 特定 的 信息 ， 但 主要 还 是 用 来 收集 来 自用 户 的 信息 ， 并 将 收 
集 的 信息 发 送 给 服务 器 端 处 理 程序 来 处 理 。 可 以 说 ， 表 单 是 客户 端 和 服务 器 端 沟通 的 桥梁 ， 
是 实现 用 户 与 服务 器 互动 的 最 主要 方式 。 下 面 首先 回顾 一 下 表单 的 基础 知识 ， 包 括 表 单 的 创 
建 和 基本 元 素 等 内 容 。 


川 )》 3.1.1 表单 简介 


Web 开发 者 经 常 提 到 的 网 页 表单 ， 就 是 指 HIML 表单 。HIML 表单 是 HIML 文档 的 一 
部 分 。HIML 文档 可 以 包含 普通 的 内 容 (例如 标题 、 文 字 和 列表 等 ), 也 可 以 包含 可 视 元 素 ( 例 
如 文本 框 、 密 码 框 和 下 拉 框 等 ) 。 

一 个 好 的 表单 可 以 为 Web 开发 者 节省 许多 工作 ， 下 面 三 点 是 设计 表单 时 需要 注意 的 
原则 。 

® 尽量 使 用 下 拉 列 表 供 用 户 选择 ， 因 为 列表 容易 使 用 ， 信 息 也 容易 处 理 。 

e ”如果 不 能 以 列表 形式 提供 ， 那 么 应 尽量 使 用 户 输入 少量 文本 ， 这 样 只 需要 花费 少量 时 间 ， 

es 提供 的 数据 也 容易 进行 处 理 。 

只 有 在 必要 时 才 要 求 用 户 输入 大 量 文 “| 二 ~ 
和 因为 大 量 的 文本 将 花费 用 户 很 多 Dm 3 
时 间 去 填写 ， 也 将 花费 更 多 的 时 间 去 1 填写 基本 注册 倘 息 。 ”2 油库 注册 油条 3 完成 注册 
处 理 。 一 般 情况 下 ， 用 户 是 不 愿意 填 ar mest a re 
写 这 么 多 信息 的 。 

目前 , 表单 的 交互 功能 表现 在 多 个 方面 : 
输入 单行 文本 、 输 入 多 行文 本 、 输 入 密码 ， we 
从 下 拉 列 表 中 进行 单项 选择 ， 从 各 列表 项 中 = 2 
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选择 一 项 或 者 多 项 ， 提 交 或 者 取消 操作 等 。 人 
例如 ， 图 3-1 中 显示 了 一 个 网 页 的 注册 页 面 ， 
该 页 面 的 注册 信息 通过 表单 来 实现 。 人 


叫 》3.1.2， 表单 标记 


表单 在 网 页 中 负责 采集 数据 。 一 个 表单 有 3 个 基本 组 成 部 分 : 表单 元 素 、 表 单 域 和 表单 
按钮 。 
e 表单 元 素 包含 处 理 表单 数据 所 用 的 URL 以 及 数据 提交 到 服务 器 的 方法 。 
e 表单 域 包含 文本 框 、 密 码 框 、 多 行文 本 框 、 隐 藏 框 、 复 选 框 、 单 选 按钮 以 及 下 拉 列 表 
框 和 文件 上 传 框 等 。 
e 表单 按钮 包括 提交 按钮 、 取 消 操作 按钮 和 一 般 按钮 ， 用 于 将 数据 传送 到 服务 器 或 者 取 
消 输入 ， 还 可 以 用 表单 按钮 来 控制 其 他 定义 了 处 理 脚本 的 处 理工 作 。 
表单 使 用 form 元 素 进 行 定 义 ， 它 是 允许 用 户 输入 信息 的 容器 。 在 表单 中 可 以 添加 表单 域 
和 表单 按钮 ， 基 本 格式 如 下 : 


<form action="" enctype="" method="" name="" onsubmit="" onreset=""> 


<!- 添加 表单 域 和 表单 按钮 -> 


</form> 
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<form> 标记 中 可 以 包含 多 个 元 素 ， 上 述 格式 只 是 列 出 了 几 种 常用 属性 ， 表 3-1 对 这 些 常 
属性 进行 了 说 明 。 


表 3-1 <form> 标记 的 常用 属性 


必需 属性 ， 用 来 指定 当 表单 提交 时 要 采取 的 动作 。 该 属性 的 值 一 般 是 要 对 表单 数 
据 进行 处 理 的 相关 程序 地 址 ， 也 可 以 是 收集 表单 数据 的 E-mail 地 址 ， 该 地 址 所 指 
向 的 服务 器 不 一 定 与 包含 表单 的 网 页 是 同一 服务 器 ， 可 以 是 位 于 任何 地 方 的 一 台 
服务 器 ， 只 要 给 出 绝对 地 址 即 可 


action 


enctype 设置 表单 数据 的 内 容 类 型 

method 定义 数据 传送 到 服务 器 的 方式 ， 其 常用 值 包括 GET (默认 值 ) 和 POST 
name 定义 表单 的 名 称 

onsubmit 主要 是 针对 submit 按钮 来 说 的 ， 执 行 提 交 操 作 


onreset 


主要 是 针对 Ieset 按钮 来 说 的 ， 执 行 取消 操作 


川 ) 3.1.3 ”基本 表单 元 素 


HTML 表单 中 主要 包括 input、select、; 
textarea、button、lable 等 表单 元 素 ， 下 面 对 这 | 
些 元 素 进行 简单 的 介绍 


WW input 元 素 
input 元 素 可 以 用 来 定义 单行 输入 文本 框 
输入 密码 框 、 单 选 按钮 、 复 选 框 、 隐 藏 控 人 
和 重 置 按钮 等 。input 元 素 是 表单 中 功能 最 丰 
富 的 ， 它 必须 广 套 在 表单 标记 中 使 用 。inpu 
元 素 有 两 个 固定 属性 : name 和 type。 
name 属性 用 于 定义 一 个 名 称 。 下 面 主要 
介绍 type 属性 ，type 属性 的 值 有 以 下 几 种 
e@ text 定义 单行 的 输入 字段 ， 用 户 可 在 
其 中 输入 文本 ， 默 认 宽度 为 20 个 字符 
@ password 定义 密码 字段 ， 该 字段 中 
的 字符 为 掩 码 。 
e@ checkbox 定义 复 选 框 。 
e button 定义 可 点 击 按钮 (多数 情况 
下 ， 用 于 启动 脚本 ) 。 
e radio 定义 单 选 按钮 。 
@ reset 定义 重 置 按钮 ， 重 置 按钮 会 


e hidden 定义 隐藏 的 输入 字段 。 
e file 定义 输入 字段 ， 用 于 文件 上 传 。 
e image 定义 图 像 形式 的 提交 按钮 。 


区 select 元 素 


select 元 素 用 于 创建 下 拉 菜 单 和 列表 框 ， 
至 少 包含 一 个 option 元 素 。 一 般 它 将 包 
0 option 元 素 ， 因 为 
下 拉 菜 单 和 列表 框 中 的 每 个 选项 都 需要 一 个 
ption 元 素来 呈现 。 
大 textarea 元 素 

textarea 元 素 用 来 创建 多 行文 本 框 〈 文 本 
区 域 》 用 于 接收 访问 者 输入 多 于 一 行 的 文本 ， 
h 它 可 以 同时 呈现 多 行 数 据 。textarea 元 素 的 
使 用 格式 如 下 : 
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<textarea rows=" 宽度 " cols=" 长 度 "> 
</textarea> 


区 button 元 素 


除 表单 中 的 所 有 数据 。 三 button 元 素 用 来 创建 图 像 按 钮 ， 也 就 是 
e submit 定义 提交 按钮 ， 提 交 按钮 会 ;允许 Web 开发 人 员 使 用 自己 喜欢 的 图 像 来 作 
把 表单 数据 发 送 到 服务 器 。 : 
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一 一 


为 按钮 ， 而 不 是 使 用 浏览 器 所 产生 的 按钮 。 ; 该 元 素 中 很 重要 的 一 个 属性 ， 用 于 把 label 绑 
这 样 可 以 将 按钮 与 表单 结合 起 来 达到 美化 界 ; 定 在 另 一 个 元 素 上 ， 属 性 for 的 值 等 于 相关 
面 的 效果 。 使 用 button 创建 图 像 按钮 的 具体 ; 联 元 素 的 id 属性 值 。 它 的 格式 如 下 : 

格式 如 下 : 


<button name=" 按钮 名 称 " type=" 按钮 类 型 "> 


</button> 


[aval 元 素 
label 元 素 可 用 来 把 信息 附属 于 其 他 元 
素 ， 每 个 label 元 素 精确 地 与 一 个 表单 元 素 相 
关联 ， 而 且 可 与 多 个 元 素 关 联 。 属 性 for 是 ; 


<label for=" 相关 联 控件 的 id 属性 值 "> 
</label> 


3-2 中 使 用 了 上 面 介 绍 的 大 部 分 表单 
元 素 。 例 如 ， 使 用 input 定义 表单 中 的 单行 输 
入 文本 框 、 输 入 密码 框 、 单 选 按钮 、 复 选 框 、 
隐藏 控件 、 重 置 按钮 及 提交 按钮 ， 使 用 select 
定义 下 拉 菜 单 和 列表 框 ， 使 用 textarea 创建 
多 行文 本 框 〈 文 本 区 域 ) 等 。 


[ol 


| 


LE 


[1 棚户 各: 同 户 各 IED 六 


在 容 。 
上 传 头 像 | 迁 拓 文件 ] 未 选择 任何 文件 和 


多 这 去 网 站 5 束 认 搜索 
csDN 目 MepN © oa 
| 计 世 网 目 加 各 网 
[ 蓉 握 技能 : 
PHP 了 网 站 开发 
PHP+MySQL SQL 报表 开发 提交 ] ml 
ASPNET 网 刘 
SPNET 网 站 开发 PHP 杠 荣 重 时 (10] 
SOAP ET 


志 单 元 表 名 你 。 LT- [a Pa] FieUplead 的 checkbox [5]Radio 


[6]Selecklist) 四 Selectmenu) [BxArea [BlSubmit [10jReset [11]Buton 


图 3-2 使 用 form 表单 元 素 


7 3.2 ”新 增 输入 类 型 


HIML5 相 比 HIML4 有 了 很 大 的 进步 ， 它 对 form 元 素 进行 了 大 量 的 修改 ， 添 加 了 许 
多 新 的 输入 类 型 ， 如 数字 类 型 和 邮箱 类 型 。 这 些 在 HTML4 中 需要 用 代码 才能 完成 ， 而 且 
HIMLS 还 提供 了 表单 数据 验证 的 方法 。 本 节 将 详细 介绍 HTMLS5 表单 新 增 的 输入 类 型 。 


吓 )》 3.2.1 url 类 型 

url 类 型 用 作 输 入 包含 绝对 URL 地 址 的 文本 框 。 在 提交 表单 时 ， 会 自动 验证 用 户 输入 url 
文本 框 中 的 值 ， 如 果 输 入 的 值 不 合法 则 不 允许 提交 ， 并 且 会 有 提示 信息 。url 类 型 的 输入 框 适 
用 于 多 种 情况 ， 如 个 人 主页 、 百 度 地 址 和 博客 地 址 等 。 

【 例 3-1】 

Url 类 型 的 使 用 方式 非常 简单 ， 下 面 为 url 的 基本 使 用 代码 。 
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<form action="#" method="get"> 
<div class="form-group"> 
<label for="inputPassword3" class="col-sm-2 control-label"> 项 目地 址 </label> 
<div class="col-sm-10"> 
<input type="url" class="form-control" id="url"> 
</div> 
</div> 
<div class="xy_c3a_btn"> 
<button type="button" class="btn btn-default active" data-dismiss="modal" aria-label="Close"> 取 消 
</button> 
<input type="submit" value=" 确认 " class="btn btn-info active"/> 
</div> 
</form> 


不 同 的 浏览 器 对 url 类 型 输入 框 的 要 求 有 所 不 同 。 例 如 ， 图 3-3 所 示 的 Chrome 浏览 器 要 
求 用 户 必须 输入 完整 的 URL 地址 ， 例 如 “http://www.baidu.com”， 并 且 人 允许 地 址 前 有 空格 。 


3 EO Ex 


€ CG OO fleW/H/XTD/ 隔 HTML5+CS53~JavaScript 网 页 设计 入 站 与 祈 用 / 漂 feiaycode3/Vin.. 廊 加 四 


项 目地 直 http//www baidueo 


可 见 人 员 
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日 一 
ge 提示 一 一 一 ERROR eT 
| 无 论 是 本 节 介 绍 的 url 类 型 ， 还 是 后 面 几 节 介绍 的 其 他 类 型 ， 它 们 都 不 会 自动 验证 输入 框 是 否 1 


为 室 ， 而 是 在 不 为 空 的 情况 下 验证 用 户 输入 的 内 容 是 否 符合 标准 。 简 单 来 说 ， 只 有 当 输入 框 的 内 容 | 
| 不 为 空 时 ， 这 些 类 型 的 输入 框 才 会 执行 验证 功能 。 | 


一 


叫 ) 3.2.2 number 类 型 

number 类 型 用 于 输入 数字 的 文本 框 。 在 提交 表单 时 ， 会 自动 检查 该 输入 框 的 内 容 是 否 ; 
数字 。 当 使 用 的 浏览 器 不 支持 number 类 型 时 ， 会 自动 显示 为 一 个 普通 的 输入 框 。 

【 例 3-2】 

在 下 面 的 表单 中 添加 number 类 型 的 input 元 素 作为 “施工 数量 ”。 代 码 如 下 : 


<form action="#" method="get"> 
<div class="form-group"> 
<label class="col-sm-2 ”col-sm-offset-2 control-label"> 施工 数量 </label> 
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<div class="col-sm-6"> 


<input type="number" value="20" class="form-control"> 


</div> 
</div> 
<input type="submit" value=" 确定 " /> 
</form> 
value 属性 表示 默认 数字 类 型 的 值 ， 如 | e max 指定 输入 框 可 以 接受 的 最 大 的 
图 3-4 所 示 。 此 时 可 以 在 输入 框 中 手动 输 输入 值 。 
入 数值 ， 也 可 以 通过 输入 框 后 的 按钮 进行 e min 指定 输入 框 可 以 接受 的 最 小 的 输 
控制 。 入 值 。 
一 e step ”输入 域 合法 的 间隔 ， 如 果 不 设 
全 NT 置 ， 默 认 值 是 1。 
@ I 各 和 8 闪 【 例 3-3] 
em 对 上 个 示例 中 的 input 元素 进行 更 改 ， 分 


施 T 划 时 


中 设置 min、max 和 step 属性 的 值 。 修 改 后 
的 代码 如 下 : 


ee <input type="number" value="20" class="form- 


地 址 


手机 


i 上 述 代码 限制 输入 的 最 小 数字 是 10， 最 

number 类 型 的 输入 框 能 够 设置 对 所 接 ; 大 数字 是 110， 并 且 要 求 数字 间隔 为 5。 重 新 

受 的 数字 的 限定 ， 除 了 value 属性 外 ， 还 可 ; 在 浏览 器 中 运行 上 述 代 码 ， 当 输入 的 数字 不 

以 结合 其 他 的 属性 使 用 ， 这 些 属 性 的 说 明 ; 符合 number 类 型 的 限制 时 将 会 弹出 验证 信 
如 下 。 | 息 ， 如 图 3-5 所 示 。 
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Des 忆 = 
€ © fle///D/Htmispace/code3/2/index html?s 


De B= 
€ 3 © | fle//D/Htmispace/code3/2/index htmls 


汪 凡 入 有 交合 ， 两 个 名 接近 的 有 和 
人 分册 为 101015. 


图 3-5 验证 number 类 型 


叫 ) 3.2.3 email 类 型 

email 类 型 是 用 于 输入 包含 邮箱 地 址 的 文本 框 ， 该 文本 框 与 其 他 文本 框 在 页 面 显 示 时 没有 
区 别 。 在 提交 表单 时 ， 会 自动 验证 文本 框 中 的 内 容 是 否 符合 邮箱 地 址 格式 ， 如 果 不 符合 ， 将 
提示 相应 的 错误 信息 。 

【 例 3-4] 

在 下 面 的 表单 中 添加 email 类 型 的 input 元 素 作为 工程 负责 人 的 联系 邮箱 。 代 码 如 下 : 
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<form action="#" method="get"> 
<div class="form-group"> 
<label class="col-sm-2 col-sm-offset-2 control-label"> 负责 人 邮箱 </label> 
<div class="col-sm-6"> 
<input type="email" class="form-control"> 
</div> 
</div> 
<input type="submit" value=" 确定 " /> 
</form> 


在 浏览 器 中 运行 上 述 代 码 并 在 页 面 中 输入 内 容 进 行 测试 ， 不 同 的 浏览 器 可 能 出 现 的 效果 
也 不 同 。 如 图 3-6 所 示 为 Chrome 浏览 器 验证 效果 。 


€ 3 © |D file//D/HtmiSpace/code3/2/index html?# 


施工 独唱 


固 请 在 “@” 后 面 拍 入 内 
客 ， “web@” 不 宛 整 


加 诗 在 电子 邮件 地 址 中 包 
括 "@" 。 "web" 


= 一“ ” 国 
少 " 
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二 
ne 提示 一 一 一 一 全 一 一 一 一 
| 在 某 些 情况 下 ， 并 不 限制 用 户 只 输入 一 个 电子 邮箱 ， 如 果 用 户 存在 多 个 邮箱 ， 也 克 许 用 户 输 | 
入 多 个 。 将 邮箱 地 址 输入 框 的 multiple 属性 的 值 设置 为 true 时 ， 克 许 用 户 输入 一 事 用 运 号 分 隔 的 邮 | 
箱 地 址 。 | 


eh 


咱 》3.2.4 range 类 型 


Iange 类 型 是 用 于 输入 一 定 范围 数值 的 文本 框 ， 并 且 可 以 设 定 对 所 接受 值 的 限制 条 件 。 它 
的 常用 属性 与 number 类 型 一 样 ， 通 过 min 属性 和 max 属性 可 以 设置 最 小 值 与 最 大 值 〈 默 认 
值 分 别 为 0 和 100)， 通 过 step 属性 指定 每 次 拖 动 的 间隔 值 。 

【 例 3-5】 
创建 一 个 示例 ， 为 input 元 素 添加 range 类 型 ， 并 为 其 指定 min、max 和 step 属性 的 值 ， 
主要 步骤 如 下 。 

轩 友 创建 HIML 网 页 ， 并 在 该 页 面 中 分 别 添加 range 类 型 的 input 元 素 和 span 元 素 ， 前 
者 指定 输入 范围 ， 后 者 显示 前 一 个 输入 框 的 值 。 相 关 代码 如 下 : 


<form action="#" method="get"> 


61 国 
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<div class="form-group"> 

<label for="inputPassword3" class="col-sm-2 control-label"> 优先 级 </label> 

<div class="col-sm-10"> 
<input id="yxj" type="range" min="10" max="100" step="5" name="yxj" 
onChange="GetValue()"/><span id="ipt_ret"></span> 

</div> 

</div> 
</form> 


大 加 添加 GetValue( 函数 的 脚本 代码 ， 在 这 段 代码 中 获取 用 户 在 range 类 型 中 设置 的 值 ， 
并 显示 到 span 元 素 中 。 代 码 如 下 : 


<script> 
function GetValue(){ 
var v= $("#yxj").val(); 
S$("#ipt_ret").html(v); 
} 


</script> 


加 副 如 果 浏 览 器 不 支持 range 类 型 ， 那 么 会 在 页 面 中 显示 一 个 普通 输入 框 。 在 支持 range 
类 型 的 浏览 器 中 ，range 类 型 的 输入 框 通常 以 滑动 条 的 方式 指定 值 。 如 图 3-7 所 示 为 Chrome 
浏览 器 验证 效果 。 


Ep A= 
二 © | filey//D/Htmlspace/code3/3/index html?yd = 10¢ 


1dlJoSeAeP+SSSO+GS1TWNLH 人 


图 3-7 ”验证 range 类 型 


咱 ) 3.2.5 datepickers 类 型 


datepickers 类 型 是 指 日 期 类 型 ，HIML5 提供 了 多 个 可 供 选取 日 期 和 时 间 的 输入 类 型 ， 
于 验证 输入 的 日 期 。 表 3-2 对 HTMLS5 中 新 增 的 日 期 和 时 间 输 入 类 型 进行 了 具体 说 明 。 
表 3-2 HTML5 新 增 日 期 和 时 间 类 型 


属 ur vv 
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( 续 表 ) 


进取 时 间 、 日 、 月 、 年 (本 地 时 间 ) 


如 果 浏 览 器 不 支持 表 3-2 列举 的 日 期 和 时 间 类 型 ， 那 么 该 类 型 的 输入 框 在 网 页 中 显示 为 


一 个 普通 输入 框 。 
【 例 3-6】 


创建 一 个 网 页 ， 然 后 添加 多 个 input 元 素 ， 并 使 用 表 3-2 列 出 的 类 型 依次 作为 这 些 元 素 的 


typ 


@ 


属性 值 。 页 面 代码 如 下 : 


<table class="table-bordered"> 


<tr> 


</tr> 
<tr> 


</tr> 
<tr> 


</tr> 
</table> 


在 浏览 器 中 运行 上 述 代码 观察 效果 ， 如 


<td>date 类 型 : <input type="date" /></td> 
<td>month 类 型 ，<input type="month" /></td> 


<td>week 类 型 : <input type="week" /></td> 
<td>time 类 型 ，<input type="time" /></td> 


<td>datetime 类 型 : <input type="datetime" /></td> 
<td>month 类 型 : <input type="datetime-local" /></td> 


可 以 看 出 ， 该 浏览 器 不 支持 datetime 输入 类 型 ， 
的 类 型 ， 用 户 可 以 在 输入 框 中 输入 内 容 ， 也 可 以 单 击 输入 框 之 后 的 按钮 进行 选择 ， 如 图 3-9 
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所 示 为 date 类 型 效果 ， 如 


D HIML5SR5Rx2 x Nd 


图 3-8 为 Chrome 浏览 器 的 显示 效果 。 从 图 3-8 中 


图 3-10 所 示 为 week 类 型 效果 。 


因此 显示 效果 与 普通 输入 框 相 同 。 对 于 支持 
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€ DC [Dfile///D/HtmlSpace/code3/4/t%b € SC Dfile///D/Htmlspace/code3/4/1 ?El | 言 G Dfile///D/Htmlspace/code3/4/rb 


date 类 型 : monith 类 型 
[EEE 一 年 -月 


Weoley id 


图 3-8 Chrome 浏览 器 初始 效果 


date 兴 型 ， monih 类 型: gatel: monih 类 型 : 


[0/0 x:v 2017 年 -月 年 上 月 所 2017 年 -月 


201TsEos 月 ~ 


提 上 刁 二 起 届 司 局 | 一 一 国人 第 -月 


a 


但 14 全 
2 2 22 


ee time 类 型 ; |22: 一 


图 3-9 date 类 型 效果 图 3-10 week 类 型 效果 
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叫 )》 3.2.6 ”color 类 型 


color 类 型 用 于 实现 RGB 颜色 选择 器 ， 其 基本 形式 是 # 概 RGGBB， 上 默认 值 是 #000000。 如 
果 浏 览 器 支持 color 类 型 ， 那 么 用 户 在 单 击 时 能 够 弹出 一 个 颜色 选择 器 供 其 选择 。 如 果 浏 览 
器 不 支持 color 类 型 ， 那 么 在 网 页 中 显示 为 一 个 普通 输入 框 。 
【 例 3-7]】 
在 HIML 网 页 中 添加 两 个 color 输入 类 型 的 input 元 素 ， 其 中 第 一 个 不 指定 value 值 ， 第 
二 个 指定 value 属性 值 为 狂 F3E96， 然 后 添加 一 个 “提交 ”按钮 。 代 码 如 下 : 


<form action="#" method="get"> 
<input name="color1" type="color" /> 
<input name="color2" type="color" value="#FF3E96" /> 
<input type="submit" value=" 提交 " /> 

</form> 


在 浏览 器 中 运行 上 述 代 码 ， 如 图 3-11 所 示 为 color 类 型 的 显示 效果 ， 直 接 单 击 颜色 按钮 
会 弹出 如 图 3-12 所 示 的 “颜色 ”对 话 框 。 


口 HTML5 colorgs 型 x 和 
€ SC Dfile///D/HtmlSpace/code3/'bH 7 三 


这 


[| 
| 
| 
| 


色调 人): 160 红 @); 0 
饱和 度 6): 0 绿 @): 0 
颜色 | 纯色 m) 襄 度 0): 0 ” 蓝 W: 0 
活 加 到 自 定 义 颜色 A) ] 
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图 3-11 color 类 型 的 显示 效果 图 3-12 “颜色 ”对 话 框 


叫 )》 3.2.7 tel 类 型 

tel 类 型 用 于 实现 电话 号 码 的 输入 ， 但 是 电话 号 码 的 格式 很 多 ， 很 难 实现 一 个 通用 的 格式 。 
因此 ，tel 类 型 通常 会 和 pattem 属性 配合 使 用 。 

【 例 3-8] 

在 HTML 网 页 中 添加 表示 手机 号 码 的 tel 输入 类 型 ， 并 通过 pattem 属性 限制 电话 号 码 的 
格式 为 11 位 数字 。 代 码 如 下 ; 


<form action="#" method="get"> 
手机 号 码 : <input name="telephone" type="tel" pattern="^\d{11}$"/> 
<input type="submit" value=" 提交 " /> 

</form> 


在 浏览 器 中 运行 上 述 代码 ， 在 页 面 中 输入 内 容 进行 测试 。 如 图 3-13 所 示 为 Chrome 浏览 
器 的 测试 效果 。 
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口 HTML 5 te 甘于 x A 口 HTML Ste x 用 
€ 言 GDDfile//DVHtmlspace/code3/ 印 交 三 € 言 GDDfile/WDVHtmlspace/code3/ 印 安 三 


手机 号 码 : |asdfasdf | 才 交 | 手机 3®: |1358464 有 
回 请 与 所 请 求 的 格式 保持 一 致 回 请 与 所 请 求 的 格式 保持 一 致 


图 3-13 tel 类 型 的 显示 效果 


川 )》 3.2.8 search 类 型 

search 类 型 是 一 种 专门 用 于 输入 搜索 关键 词 的 输入 框 ， 它 能 自动 记 住 一 些 字符 ， 例 如 站 
点 搜索 或 者 Google 搜索 。 如 果 浏 览 器 不 支持 search 输入 类 型 ， 那 么 会 在 网 页 中 显示 为 一 个 普 
通 输入 框 ， 如 果 浏 览 器 支持 search 输入 类 型 ， 在 用 户 输入 内 容 后 ， 会 在 右 侧 附 带 一 个 删除 图 
标的 按钮 ， 单 击 这 个 图 标 按钮 可 以 快速 清除 内 容 。 

【 例 3-9】 

在 HTML 表单 元 素 中 添加 一 个 search 类 型 的 输入 框 和 一 个 提交 按钮 。 页 面 代 码 如 下 ; 


<form action="#" method="get"> 
关键 字 : <input type="search" name="searchinfo" /> 
<input type="submit" value=" 提交 " /> 

</form> 


在 浏览 器 中 运行 本 示例 的 代码 ， 如 图 3-14 所 示 为 输入 内 容 时 的 效果 ， 图 3-15 所 示 为 搜 
索 时 的 效果 。 
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图 3-14 输入 内 容 时 的 效果 图 3-15 搜索 时 的 效果 


9) 3.3 ”新 增 属性 

掌握 HTML5 新 增 输入 类 型 的 使 用 方法 之 后 ， 本 节 将 介绍 HTML5 中 新 增 的 一 系列 与 表 
单 和 输入 有 关 的 属性 。 
叫 )》 3.3.1 表单 类 属性 


简单 来 说 ， 表 单 类 属性 就 是 与 form 元 素 有 关 的 属性 。HTML5 新 增 了 autocomplete 属性 
和 novalidate 属性 两 个 表单 类 属性 。 
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WY autocomplete 属性 
atuocomplete 属性 用 于 指定 所 有 的 表单 控件 是 否 应 该 拥有 自动 完成 功能 。 该 属性 的 值 有 
on 和 off。 如 果 将 属性 值 指定 为 on， 表 示 执 行 自动 完成 功能 ， 如 果 将 属性 值 指 定 为 off， 则 表 
示 关 闭 自动 完成 功能 。 
无 论 是 form 元 素 还 是 多 个 类 型 的 input 元 素 ， 都 可 以 使 用 autocomplete 属性 ， 使 用 该 属 
性 时 的 注意 事项 如 下 。 
e@ inpnut 元 素 要 位 于 form 表单 中 ， 并 且 要 指定 name 属性 ， 表 单 必须 包含 submit 提交 按钮 。 
@ 默认 情况 下 ，text 类 型 的 input 元 素 含 有 autocomplete 为 on 的 属性 ， 如 果 要 取消 自动 完成 ， 
那么 需要 将 autocomplete 指定 为 of。 
e@ 浏览 器 自动 记忆 的 值 为 已 提交 的 值 ， 并 且 这 些 值 的 顺序 为 提交 的 先后 顺序 。 
e@ 浏览 器 自动 记忆 的 值 是 以 标记 的 name 属性 为 标准 的 。 也 就 是 说 ， 如 果 表单 中 的 input 标 
记 有 相同 的 name， 那 么 就 有 相同 的 自动 完成 列表 ( 与 是 否 在 同一 个 form 中 和 是 否 在 同一 
个 网 页 中 无 关 ) 。 
® 自动 完成 列表 信息 没有 存放 在 浏览 器 缓存 中 。 
【 例 3-10] 
为 页 面 中 的 <form> 标记 指定 autocomplete 属性 ， 并 将 该 属性 的 值 指定 为 on， 然后 在 表 
单 中 添加 两 个 输入 框 和 一 个 按钮 。 页 面 代码 如 下 : 


<form id="formOne" autocomplete="on"> 
用 户 名 : <input type="text" id="autoFirst" name="autoFirst"/><br/><br/> 
上 昵 &nbsp;&nbsp;&nbsp; 称 : <input type="text" id="autoSecond" name="autoSecond" /><br/><br/> 
<input type="submit" value=" 提交 " /> 

</form> 


在 页 面 中 输入 内 容 并 提交 ， 测 试 的 效果 如 图 3-16 和 图 3-17 所 示 。 
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/站 form 元 素 的 autocomplet x 癌 form 元 素 的 autocomplet x 玫 
€ 2 C |D file///D:/html5/formtest/thirteen.html 安 二 | | € 3 © | filey//D:/html5/formtest/thirteen.html 安 | 三 


用 户 名 : 上 | 
admi 
电 称 : ORG 攻 
地 旦 
EI 
图 3-16 用 户 名 自动 完成 的 效果 图 3-17 昵称 自动 完成 的 效果 


autocomplete 属性 不 仅 可 以 用 于 form 元 素 ， 还 可 以 用 于 所 有 类 型 的 input 元 素 。 可 以 更 
改 例 3-10 中 的 代码 ， 将 “昵称 ”文本 框 的 autocomplete 属性 的 值 设置 为 off。 这 时 页 面 代 码 
如 下 : 


<form id="formOne" autocomplete="on"> 
用 户 名 : <input type="text" id="autoFirst" name="autoFirst"/><br/><br/> 
上 昵 &nbsp;&nbsp;&nbsp; 称 : <input type="text" autocomplete="off" id="autoSecond" name= 


"autoSecond" /><br/><br/> 
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<input type="submit" value=" 提交 " /> 
</form> 


在 上 述 代 码 中 ， 为 <form> 标记 指定 autocomplete 属性 的 值 为 on， 表 示 form 元 素 中 的 两 
个 输入 框 都 实现 自动 完成 功能 。 同 时 ， 又 为 “昵称 ”输入 框 指定 了 autocomplete 属性 ， 并 且 
该 属性 的 值 为 o 作 ， 表 示 该 输入 框 不 开启 自动 完成 功能 。 

重新 在 浏览 器 中 运行 上 述 代码 进行 测试 ， 观 察 autocomplete 属性 的 实现 效果 ， 如 图 3-18 
和 图 3-19 所 示 分 别 为 两 个 输入 框 的 效果 。 从 这 两 个 图 中 可 以 发 现 ，“ 用 户 名 ”输入 框 依旧 会 
实现 自动 完成 功能 ， 而 “昵称 ”输入 框 关闭 了 自动 完成 功能 。 


0 = [SEE 
站 form 元 素 的 autocomple x 下， 站 form 元 素 的 autocomple x 时 
所 © [file///D:/html5/formtest/thirteen.html 安 三 | | € © Dfile///D:/html5/formtest/thirteen.html 站 三 
用 户 名 : 用 户 名 : admin 
admin 
电 称 已 昵称 : 区 十 
[开交 ] 提交 | 
图 3-18 “用 户 名 ”输入 框 可 以 自动 完成 输入 图 3-19 “昵称 ”输入 框 不 能 自动 完成 输入 


o 一 技巧 
| 各 个 浏览 器 对 autocomplete 属性 支持 的 列表 个 数 有 差异 ， 例 如 Google 浏览 器 和 Opera 浏览 器 | 
| 记忆 最 近 6 个 按 输入 顺序 先后 显示 ， 超 出 之 后 按照 输入 值 提交 的 次 数 降序 显示 6 个 。Firefox 浏览 
| 器 对 自动 完成 列表 数据 的 个 数 没有 限制 ， 按 提交 的 先后 顺序 显示 ， 超 出 部 分 滚动 显示 。 | 


区 novalidate 属性 


简单 来 说 ，novalidate 属性 用 于 取消 表单 验证 。 为 表单 设置 该 属性 后 会 关闭 整个 表单 的 有 
效 性 检查 ， 这 样 就 不 再 对 form 内 所 有 表单 控件 进行 验证 。 
除了 可 以 指定 form 元 素 的 novalidate 属性 取消 验证 外 ， 还 有 两 种 取消 验证 的 方法 ， 说 明 
如 下 。 
®@ 利用 input 元 素 的 formnovalidate 属性 可 以 让 表单 验证 对 单个 input 元 素 失 效 。 
e@ 为 submit 类 型 的 按钮 指定 formnovalidate 属性 ， 在 用 户 单 击 按钮 时 相当 于 使 用 form 元 素 
的 novalidate 属性 ， 这 会 导致 整个 表单 验证 都 失效 。 


咱 ) 3.3.2 输入 类 属性 


HTML5 提供 了 一 系列 与 input 元 素 有 关 的 属性 ， 为 input 元 素 指 定 这 些 属性 可 以 实 
现 不 同 的 功能 。 具 体 来 说 ，HTML5 新 增 的 与 input 元 素 有 关 的 属性 包括 autocomplete 属 
性 、autofocus 属性 、form 属性 、 表 单 重 写 属 性 (formaction、formenctype、formmethod、 
formnovalidate 和 formtarget)、width 和 height 属性 、list 属性 、min 属性 、max 属性 、step 属性 、 
multiple 属性 、pattern 属性 、placeholder 属性 以 及 required 属性 。 

在 上 述 属 性 中 ， 有 些 属性 在 前 面 已 经 提 到 并 使 用 过 ,例如 autocomplete 属性 、min 属性 、 
max 属性 和 step 属性 。 下 面 介绍 其 他 几 种 常用 的 属性 。 
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三 autofocus 属性 

autofocus 属性 用 于 指定 页 面 加 载 后 是 否 自动 获取 焦点 ， 一 个 页 面 上 只 能 有 一 个 元 素 指定 
autofocus 属性 。autofocus 属性 适用 于 所 有 类 型 的 <input> 标记 ， 该 属性 的 值 是 一 个 布尔 值 ， 

将 标记 的 属性 值 指定 为 tue 时 ， 表 示 页 面 加 载 完 毕 后 会 自动 获取 焦点 。 


【 例 3-11] 
下 面 的 示例 代码 为 昵称 输入 框 添加 autofocus 属性 ， 当 页 面 加 载 完 毕 后 会 直接 将 焦点 放 在 
了 昵称 输入 框 。 


了 昵 &nbsp;&nbsp;&nbsp; 称 : 
<input type="text" autocomplete="off" id="autoSecond" name="autoSecond" autofocus="true" /> 


EY mutiple 属性 

multiple 属性 用 于 指定 输入 框 可 以 选择 多 个 值 ， 该 属性 适用 于 email 和 file 类 型 的 input 元 
素 。multiple 属性 用 于 邮箱 类 型 的 input 元 素 时 ， 表 示 可 以 在 文本 框 中 输入 多 个 邮箱 地 址 ， 多 
个 地 址 之 间 用 逗号 进行 分 隔 ，multiple 属性 用 于 file 类 型 的 input 元 素 时 ， 表 示 可 以 选择 多 个 
文件 。 

【 例 3-12] 

创建 一 个 示例 演示 multiple 属性 在 email 类 型 和 file 类 型 的 input 元 素 中 的 使 用 ， 基 本 实 
现 步 又 如 下 。 

加 外 在 包含 form 元 素 的 HIML 页 面 中 添加 两 个 input 元 素 ， 分 别 指定 该 标记 的 type 属性 
为 email 和 file。 代 码 如 下 : 


<form id="formOne"> 
<div class="form-group"> 
<label for="inputPassword3" class="col-sm-2 control-label"> 可 见 人 员 </label> 


1dUoSeAer+SsSSI+S1WNLH 人 


<div class="col-sm-10"> 
<input type="email" name="myemail" class="form-control" /> 多 个 之 间 使 用 逗号 进行 分 隔 
</div> 
</div> 
<div class="form-group"> 
<label for="inputPassword3" class="col-sm-2 control-label"> 相关 文档 </label> 
<div class="col-sm-10"> 
<input type="file" name="myfile” /> 
</div> 
</div> 
<input type="submit" value=" 提交 " /> 
</form> 


轩 加 在 浏览 器 中 运行 上 述 页 面 查看 效果 。 从 图 3-20 中 可 以 看 出 ， 不 指定 multiple 属性 而 


输入 多 个 电子 邮箱 时 会 自动 验证 并 提示 错误 。 这 时 ， 更 改 上 一 步骤 中 的 代码 ， 为 两 个 input 
元 素 添加 multiple 属性 。 修 改 后 的 代码 如 下 : 
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<input type="email" name="myemail" class="form-control" multiple="true"/> 


<input type="file" name="myfile" multiple="true" /> 


葬 如 重新 运行 上 述 代码 查看 效果 , 并 输入 内 容 进 行 测试 。 此 时 既 可 以 输入 多 个 邮箱 地 址 ， 
也 可 以 选择 多 个 文件 ， 如 图 3-21 所 示 。 


CR 
选择 六 件 | 未 选择 任何 文件 ES 


= | | 
图 3-20 应 用 multiple 属性 前 图 3-21 应 用 multiple 属性 后 


三 pattemn 属性 

在 3.2.7 节 介绍 tel 输入 类 型 时 已 经 使 用 过 pattern 属性 ， 该 属性 用 于 指定 input 元 素 中 内 
容 的 验证 模式 ， 即 正则 表达 式 。pattem 属性 适用 于 类 型 是 text、search、url、tel、email 和 
password 的 input 元 素 。 

【 例 3-13] 

创建 一 个 会 员 注册 表单 ， 并 使 用 pattern 属性 对 输入 的 信息 进行 有 效 性 检查 ， 实 现 步 骤 
如 下 。 

轩 友 第 一 行 让 用 户 输入 姓名 ， 要 求 用 户 的 姓名 必须 是 汉字 ， 而 且 长 度 小 于 12， 大 于 2。 
代码 如 下 : 
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<form id="formOne"> 
<table class="table-bordered"> 
<tr> 
<td align="right" width="20%"> 姓名 : </td> 
<td><input type="text" name="username'" pattern="^[\u4e00-\u9fa5\uf900-\ufa2d]{1,11}5" /> 
(汉字 ， 只 能 包含 中 文字 符 〈 长 度 小 于 12， 大 于 2) ) </td> 
</tr> 
</table> 
<input type="submit" value=" 提交 " /> 


</form> 
加 第 二 行 让 用 户 输 入 QQ 号 码 ， 要 求 是 5 位 以 上 的 数字 。 代 码 如 下 : 


<tr> 

<td align="right">QQ 号 码 : </td> 

<td><input type="text" name="myqq" pattern="^[1-9][0-9]{4,}$" /> (从 10000 开始 ) </td> 
</tr> 
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号 第 三 行 提 示 用 户 输 入 固定 的 电话 号 码 ， 形 式 是 xxxx-xxxxxxx 或 者 
和 


<tr> 
<td align="right"> 固定 电话 : </td> 
<td><input type="tel" name="mytel" pattern="\d{3}-\d{8}|\d{4}-\d{7}"/> ( 内 电话 号 码 (0511- 
4405222、021-87888822)) </td> 
</tr> 


大 如 继续 提示 用 户 输入 手机 号 码 , 并 且 要 求 用 户 输入 的 手机 号 码 以 13、14、15 或 18 开头 。 
代码 如 下 : 


<tr> 
<td align="right"> 手机 号 码 ; </td> 
<td><input type="text" name="myphone" pattern="^(13[0-9]114[517]115[01112131516171819] 
118[0111213151617181 9])\df8}$"/>( 以 13、14、15、18 开头 的 电话 号 码 ) </td> 
</tr> 


人 中 添加 输入 身份 证 号 的 输入 框 ， 并 且 要 求 输入 的 身份 证 号 合法 。 页 面 代 码 
如 下 : 


<tr> 

<td align="right"> 身份 证 号 :</td> 

<td><input type="text" name="mycard” pattern="^\d{15}|\d{18}$"/> (15 位 或 18 位 身份 证 号 ) </td> 
</tr> 


了 I 添加 用 于 执行 提交 操作 的 按钮 ， 具 体 代码 不 再 显示 。 
人 加 大 运行 页 面 查看 效果 ， 输 入 内 容 后 单 击 “提交 ”按钮 进行 测试 ， 如 果 内 容 为 空 则 表示 
忽略 验证 。 如 图 3-22 所 示 为 验证 姓名 效果 ， 如 图 3-23 所 示 为 验证 QQ 号 码 效果 ， 如 图 3-24 
所 示 为 验证 固定 电话 效果 ， 如 图 3-25 所 示 为 验证 身份 证 号 效果 。 


ye ol 
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Bamin | (汉字 ,只 能 包 合 中 文字 符 (汉字 ， 只 能 包含 中 文字 符 
TS 发 度 小 于 12， 大 于 2) 
回 请 与 所 请 求 的 格式 保持 一 致 。 CE S22 
(从 10000 开 始 ) : 四 ] (从 10000 开 始 ) 
轿 请 与 所 请 求 的 格式 保持 一 致 


010-12345678 《国内 电话 号 码 (0511- )- 


4405222、021-87888822)) 4405222、021-87888822)) 


A 138 (以 13、14、15、18 开 头 的 (以 13、14、15、18 开 头 的 
手机 号 码 : : 
“| 电话) 电话 续 琴 ) 


身份 证 号 : |12345612345678 《15 位 或 18 位 身份 证 号 ) : | (15 位 或 18 位 身份 证 号 》 


El 


图 3-22 ”验证 姓名 效果 图 3-23 验证 QQ 号 码 效果 
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站 名 (汉字 ， 只 能 包 合 中 文字 符 


《长 度 小 于 12, 大 于 2》》 


QQS 码 : |12345 《从 10000 开 始 ) 


国电 活 : 【10-123459| ] (B30s11- 


4405222、[ 


手机 号 码 : Er) 


身份 证 号 : 《15 位 或 18 位 身份 证 号 ) 


加 


图 3-24 验证 固定 电话 效果 


加 请 与 所 请 求 的 格式 保持 一 致 
(以 13、14、15、18 开 头 的 
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《汉字 ， 只 能 包含 中 文字 符 
外 名: 《共度 ] 于 12) 天 于 27 7 


12345 《从 10000 开 始 》 


010-12345678 《国内 电话 号 码 (0511- 
4405222、021-87888822)》 


， 《以 13、14、15、18 开 头 的 
PSR ss) 


身份 证 号 : 。 |12345612345678 | (15 位 或 18 位 身份 证 号 ) 


ES 回 请 与 所 请 求 的 格式 保持 一 到 


图 3-25 验证 身份 证 号 效果 


正则 表达 式 是 一 个 以 “^” 表 示 开 头 ， 以 “$” 表 示 结 尾 的 表达 式 。 除 了 本 示例 介绍 的 这 
些 表 达 式 外 ， 使 用 patterm 属性 还 可 以 指定 正则 表达 式 匹 配 其 他 信息 。 例 如 ， 在 表 3-3 中 列 出 


了 常用 的 正则 表达 式 及 其 说 明 。 
表 3-3 ”常用 的 正则 表达 式 


| Em 


^[0-9]*$ 

Adfnjg 

Adfn 

Nd{m,n}$ 
^([1-9][0-9]*)+(.[0-9]{1,2})?$ 
ACID2dHCAdH)28 


数字 

D 位 的 数字 

至 少 了 位 数字 

m 一 n 位 数字 

非 零 开 头 的 最 多 带 两 位 小 数 的 数字 
正 数 、 负 数 和 小 数 


AAAw+$ 或 ^w{3,20}$ 


^[vu4E00-vu9FASA-Za-z0-9 ]+$ 


d+$ 或 ^1-9]\d*|08 非 负 整数 

和 [1-9]\d*|08 

或 ACdHIOHD)S 和 

^[vu4e00-vu9fas]{0,}$ 汉字 

^[A-Za-z0-9]+$ 

或 ^[A-Za-z0-9]{4,40}$ 天 

^[A-Za-z]+$ 由 26 个 英文 字母 组 成 的 字符 囊 
^[A-Za-z0.9]18 由 数字 和 26 个 英文 字母 组 成 的 字符 事 


由 数字 、26 个 英文 字母 或 者 下 划 线 组 成 的 字符 囊 
中 文 、 英 文 、 数 字 ， 包 括 下 划 线 
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( 续 表 ) 
正则 表达 式 说 明 


^[vu4E00-vu9FASA-Za-z0-9]+$ 


或 [u4E00-w9FA5A-Za-z0-9]{2.20}$ 下 着 作 学 


MNw+([-+.]Ww+)*@\Ww+([-. NWw+)*\ w+([-.] w+)*$ E-mail 地 址 


[a-zA-z]+://[^\s]* 


或 http:W([\w-]HJ+[\w-]HOU[\w- /1296&=]*)?8 RL 


^([0-9]){7,18}(x|X)?$ 


或 ^\d{8,18}|[0-9x]{8,18}I[0-9X]{8.18}2$ Ot hd 


账号 合法 性 检查 (字母 开头 ， 允 许 5 一 16 字 节 ， 
允许 字母 、 数 字 、 下 划 线 ) 


密码 (以 字母 开头 , 长度 为 6 一 18, 只 能 包含 字母 、 
数字 和 下 划 线 ) 


^[a-zA-Z][a-zA-Z0-9 ]{4.15}$ 


^[a-zA-Z]\w{5.17}$ 


三 placeholder 属性 


placeholder 属性 用 于 描述 输入 框 所 期 待 的 值 。placeholder 属性 适用 于 类 型 是 text、 
search、url、tel、email 以 及 password 的 input 元 素 。 
在 使 用 placeholder 属性 时 ， 其 内 容 将 在 输入 框 为 空 时 显示 ， 在 输入 框 获得 焦点 时 消失 。 
【 例 3-14】 
在 上 个 示例 的 基础 上 进行 更 改 , 分 别 为 “姓名 ”和 “QQ 号 码 ” 输 入 框 指定 placeholder 属性 。 
相关 代码 如 下 : 


<input type="text" name="username" pattern="^[\u4e00-\u9fa5\uf900-\ufa2d]{1,11}$" placeholder=" 例 


如 : 张 小 峰 或 欧 莲 芝 " /> 
<input type="text" name="myqq" pattern="^[1-9][0-9]{4,}$" placeholder=" 12345678" /> 
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在 浏览 器 中 运行 上 述 代 码 查看 效果 ， 如 图 3-26 所 示 。 


] as, 44 


Cs 或 Te 区 身价 证 号 > 


图 3-26 placeholder 属性 的 使 用 效果 
[required 属性 
在 3.2 节 中 介绍 的 HTML5 新 增 的 输入 类 型 ， 并 不 会 自动 判断 用 户 是 否 在 输入 框 中 输入 
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了 内 容 ， 只 有 在 输入 框 中 输入 内 容 时 才 会 进行 判断 。 如 果 开 发 者 要 求 某 个 输入 框 的 内 容 是 必 
须 填写 的 ， 那 么 可 以 为 input 元 素 指定 required 属性 。 

required 属性 用 于 指定 必须 在 提交 之 前 填写 输入 框 ， 即 输入 框 不 能 为 空 。 例 如 ， 
录 时 要 求 必 须 输入 用 户 名 和 密码 ， 这 时 可 以 为 它们 指定 required 属性 。 

【 例 3-15】 

继续 在 上 个 示例 的 基础 上 添加 代码 ， 为 “姓名 ”和 “手机 号 码 ” 的 input 元 素 指定 
required 属性 。 相 关 代 码 如 下 : 

<input type="text" name="username" pattern="^[\u4e00-\u9fa5\uf900-\ufa2d]{1,11}$" placeholder="” 例 


如 : 张 小 峰 或 欧 莲 芝 "required /> 
<input type="tel" name="mytel" pattern="\d{3}-\d{8}|\d{4}-\d{7}" required /> 


户 登 


Es" 


在 浏览 器 中 直接 单 击 “ 提 交 ” 按 钮 查看 测试 效果 , 此 时 会 按 顺 序 验 证 “姓名 ”和 “手机 号 码 ” 
的 非 空 性 ， 如 果 为 空 则 会 显示 错误 信息 ， 如 图 3-27 所 示 。 
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(汉字 ， 只 能 包含 中 文字 符 ， | 阵 志 法 汉字 ， 只 能 包含 中 文字 符 


好 名 | 书 二 
I (长庚 小 于 12， 大 于 2) 》 
回 请 境 写 上 字段. 


QQ 号 码 : | |1234567 (从 10000 开 始 》 3 | [1234: 从 10000 开 始 》 


国定 电话 :| (国内 电话 号 码 (0511- 要 | 国内 电话 号 码 (0511- 
4405222，021-87888822)) 4405222, 
加 滑 吉 S 此 字段 . 


手机 S 码 : (以 13、14、15、18 开 头 的 以 13、14、15、18 开 头 的 


电话 号 码 ) 


身份 证 号 :| (15 位 或 18 位 身份 证 号 ) : 15 位 或 18 位 身份 证 号 ) 
E33 


图 3-27 required 属性 的 使 用 


从 》 3.4 表单 元 素 


HTMLS5 新 增 了 3 个 与 表单 有 关 的 元 素 ， 分 别 是 datalist、keygen 和 output， 下 面 将 分 别 
对 这 3 个 元 素 进行 介绍 。 


叫 )》3.4.1 datalist 元 素 
datalist 元 素 可 以 定义 一 个 选项 列表 ， 它 通常 和 input 元 素 配 合 使 用 ， 从 而 定义 input 元 素 
可 能 出 现 的 一 些 值 。 使 用 datalist 元 素 时 首先 要 通过 id 属性 为 其 指定 一 个 唯一 的 标识 ， 然 后 
为 input 元 素 添加 list 属性 ， 将 list 属性 值 设置 为 datalist 元 素 对 应 的 id 属性 值 。 
【 例 3-16]】 
下 面 创建 一 个 示例 ， 演 示 input 元 素 与 datalist 元 素 关联 前 后 的 效果 。 假 设 ， 表 单 中 原来 
有 一 个 以 下 的 input 元 素 。 
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<span class="form-group"> 
<label> 设备 制造 商 </label><br> 
<input type="text" class="form-control" name="made_name_key" > 


</span> 


如 上 述 代 码 所 示 ， 这 是 一 个 很 普通 的 文本 类 型 的 input 元 素 ， 它 可 以 为 空 ， 也 可 以 输入 
任何 内 容 。 在 浏览 器 中 的 效果 如 图 3-28 所 示 。 

接 下 来 使 用 datalist 元 素 定 义 一 个 数据 源 列表 ， 然 后 将 元 素 绑 定 到 上 面 的 mput 元 素 。 这 
部 分 代码 如 下 : 


<input type="text" class="form-control" name="made_name_key" list="madelist"> 
<datalist id="madelist"> 

<option> 飞 梦 </option> 

<option> 瑞 百 瑞 </option> 

<option> 沃 众 </option> 

<option> 火 木 </option> 

<option> 捷 辉 </option> 

<option> 蓝 宇 </option> 
</datalist> 


重新 运行 上 述 代 码 ， 观 察 input 元 素 的 效果 ， 此 时 用 户 既 可 以 手动 输入 内 容 ， 也 可 以 从 
下 拉 列 表 中 选择 内 容 ， 如 图 3-29 所 示 。 
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向 首页 > 声 人 作 浊 ; 所 设 甸 羡 洗 页 > 策划 > 所 有 设备 


CD 工程 认 亲 抽检 FIRB 区 
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[Ce 


“s**t os 


Ses i I a 
图 3-28 使 用 datalist 元 素 前 的 效果 图 3-29 使 用 datalist 元 素 后 的 效果 


1) 3.4.2 keygen 元 素 
keygen 元 素 是 密 钥 生 成 器 ， 作 用 是 提供 一 种 验证 用 户 的 可 靠 方法 。 当 用 户 提交 表单 时 会 
生成 两 个 键 : 一 个 是 私 钥 ， 它 存储 在 客户 端 ， 另 一 个 是 公 钥 ， 它 被 发 送 到 服务 器 。 其 中 ， 公 
钥 可 用 于 之 后 验证 用 户 的 客户 端 证 书 。keygen 元 素 的 常用 属性 及 其 说 明 如 表 3-4 所 示 。 
表 3-4 keygen 元 素 常 用 属性 


autofocus 使 keygen 字段 在 页 面 加 载 时 获得 焦点 
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or 人 


〈 续 表 ) 


如 果 使 用 ， 则 将 keygen 的 值 设置 为 在 提交 时 询问 
禁用 keytag 字段 

定义 keygen 字段 所 属 的 一 个 或 者 多 个 表单 
定义 keytype。 由 Isa 生成 RSA 密 铀 
定义 keygen 元 素 的 唯一 名 称 。name 属性 用 于 在 提交 表单 时 搜集 字段 的 值 


challenge 


disabled 


keytype 


name 


【示例 2】 
继续 在 上 个 示例 的 基础 上 添加 代码 ， 演 
示 keygen 元 素 的 使 用 。 相 关 代码 如 下 : 


<p> 

<label > 安全 性 : </label> 

<keygen name="security"></keygen> 
</p> 


在 浏览 器 中 运行 上 述 代 码 查看 效果 ， 如 
图 3-30 所 示 。 


图 3-30 keygen 元 素 的 使 用 效果 


叫 》3.4.3 output 元 素 


output 元 素 必须 属于 某 个 表单 ， 或 者 通过 属性 指定 到 某 个 表单 。output 元 素 可 以 显示 不 
同类 型 表单 元 素 的 内 容 ， 并 且 该 元 素 可 以 与 input 元 素 建立 关联 ， 当 input 元 素 的 值 改变 时 会 
自动 触发 JavaScript 事件 ， 这 样 就 可 以 十 分 方便 地 查 到 表单 中 各 元 素 的 输入 内 容 。 

ouput 元 素 有 一 个 oninput 事件 ， 它 在 关联 的 内 容 发 生变 化 时 触发 。output 元 素 主 要 有 以 
下 三 个 属性 。 

e for 定义 输出 域 相关 的 一 个 或 多 个 元 素 。 

e form 定义 输入 字段 所 属 的 一 个 或 多 个 表单 。 

e name 定义 对 象 的 唯一 名 称 ( 表单 提交 时 使 用 ) 。 

【 例 3-17] 

使 用 output 元 素 计算 表单 中 的 商品 单价 和 购买 数量 两 个 数字 相 乘 的 结果 ， 并 将 结果 显示 
到 表单 中 。 实 现代 码 如 下 : 
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<form action="#" oninput="sum.value=parselnt(num1.value)*parselnt(num2.value)"> 
<h1> 购物 结算 </h1> 
<p> 
<label for="username" class="uname" data-icon="u" > 商品 单价 : </label> 
<input type="number" name="num1" value="0"/> 


</p> 
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<p> 


<label for="password" class="youpasswd" data-icon="p"> 购买 数量 : </label> 


<input type="number" name="num2" value="0"/> 


</p> 
<p class="login button"> 总 价 : 


<button type="button" value=" 确定 " ><output name="sum" for="numl num2"></output> 


</button> 
</p> 
</form> 


在 上 述 代 码 中 要 注意 fom 元 素 的 
oninput 事件 ， 在 该 事件 中 获取 所 需 的 数据 并 
执行 乘法 运算 ， 最 后 显示 name 属性 值 到 sum 
的 元 素 ( 即 output 元 素 ) 中 。 在 Chrome 浏 
览 器 中 查看 效果 ， 如 图 3-31 所 示 。 


咱 ) 3.4.4 optgroup 元 素 
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型 的 选项 进行 组 合 。 


在 其 首次 加 载 时 禁用 该 选项 组 。 
【 例 3-18] 


项 分 为 总 部 、 南 区 分 部 和 朝阳 分 部 三 个 组 。 
代码 如 下 : 


<p> 
<label > 角色 : </label> 

<select> 

<optgroup label=" 总 部 "> 

<option value ="1"> 系统 管理 员 </option> 
<option value ="2"> 区 域 管理 员 </option> 


€ 3 © (fle//D/Htmispace/code3/13/index html 


购物 结算 


一 般 情况 下 ， 下 拉 莱 单 只 允许 有 一 种 类 | 
型 的 选项 ， 而 且 不 能 对 各 种 类 型 的 选项 进行 : 
组 合 ， 而 使 用 optgroup 元 素 则 可 以 对 不 同类 | 


optgroup 元 素 主要 有 两 个 属性 ， label 属 ， 
性 用 于 定义 选项 组 的 名 称 ，disabled 属性 用 于 | 


下 面 使 用 optgroup 元 素 定义 一 个 会 员 登 ` 


录 时 选择 角色 的 下 拉 列 表 ， 并 将 列表 中 的 选 ， 


在 Chrome 浏览 器 中 的 运行 效果 如 图 3-32 


所 示 。 


图 3-31 使 用 output 元 素 的 效果 


<option value ="3"> 网 格 长 </option> 
</optgroup> 

<optgroup label=" 南 区 分 部 "> 

<option value ="4"> 财务 专员 </option> 
<option value ="5"> 人 力 管理 </option> 
</optgroup> 

<optgroup label=" 朝阳 分 部 "> 

<option value ="6"> 信息 管理 员 </option> 
<option value ="7"> 网 络 运 维 </option> 
<option value ="8"> 售后 </option> 
</optgroup> 

</select> 

</p> 
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会 员 登 录 


:| 系统 管理 员 
总 部 


我 要 注册 。 找 回 密码 


图 3-32 使 用 optgroup 元 素 的 效果 


&7)) 3.5 ”表单 验证 


通过 前 面 几 节 的 学 习 ， 我 们 知道 HIMLS 新 增 了 大 量 的 输入 类 型 和 表单 属性 ， 同 时 也 加 
强 了 对 表单 元 素 的 验证 功能 。 表 单 验证 是 一 套 系统 ， 通 过 对 元 素 内 容 进行 本 地 的 有 效 性 验证 ， 
避免 了 重复 提交 ， 同 时 也 减轻 了 服务 器 的 处 理 压 力 。 

根据 验证 的 提交 方式 可 以 分 为 自动 验证 、 显 式 验证 和 自 定义 验证 3 种 ， 当 然 还 可 以 取消 
验证 ， 下 面 依次 介绍 这 几 种 操作 的 实现 。 


叫 )》 3.5.1 自动 验证 


自动 验证 功能 是 HTMLS5 表单 的 默认 验证 方式 ， 它 会 在 表单 提交 时 执行 自动 验证 ， 如 果 
验证 不 通过 将 无 法 提交 。 

如 果 要 对 输入 的 内 容 进 行 有 效 性 验证 ， 则 可 以 使 用 下 面 的 属性 。 

e required 属性 ”限制 在 提交 时 元 素 内 容 不 能 为 空 。 

e@ pattern 属性 ”通过 正则 表达 式 限制 元 素 内 容 的 格式 ， 不 符合 格式 则 不 允许 提交 。 

e min 属性 和 max 属性 ”限制 数字 类 型 输入 范围 的 最 小 值 和 最 大 值 ， 不 在 范围 内 不 允许 
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提交 。 
e@ step 属性 ”限制 元 素 的 值 每 次 增加 或 者 减少 的 基数 ， 不 是 基数 倍数 时 不 允许 提交 。 
【 例 3-19】 


使 用 自动 验证 方式 创建 一 个 form 表单 , 在 表单 中 添加 4 个 input 元 素 , 分 别 用 于 输入 了 昵称、 
登录 密码 、 确 认 密码 和 验证 邮箱 。 具 体 代码 如 下 : 


<form action="mysuperscript.php" autocomplete="on "> 
<h1> 会 员 注 册 </h1> 
<p> 
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<label for="usernamesignup" class="uname" data-icon="u"> 昵称 </label> 
<input id="usernamesignup" name="usernamesignup" required="required" type="text" 
placeholder=" 字母 和 数字 组 成 " /> 
</p> 
<p> 
<label for="emailsignup" class="youmail" data-icon="e" > 验证 邮箱 : </label> 
<input id="emailsignup" name="emailsignup" required="required" type="email" 
placeholder="mysupermail@mail.com"/> 
</p> 
<p> 
<label for="passwordsignup" class="youpasswd" data-icon="p"> 登录 密码 : </label> 
<input id="passwordsignup" name="passwordsignup" required="required" type="password" 
placeholder="eg.X8dfl90EO" pattern="\w{6,12}"/> 
</p> 
<p> 
<label for="passwordsignup_confirm" class="youpasswd" data-icon="p"> 确认 密码 : </label> 
<input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" 
type="password" placeholder="eg.X8dfl90EO"/> 
</p> 
<p class="signin button"><input type="submit" value=" 确定 "/> </p> 


</form> 


在 浏览 器 中 运行 页 面 , 直接 单 击 “ 确 定 ” 按 钮 查看 验证 效果 , 并 根据 提示 对 内 容 进行 输入 ， 
效果 如 图 3-33 所 示 。 


,和 © [file///D:/HtmlSpace/code3/10/index.html 1 3 file///D:/HtmlSpace/code3/10/index.html 


欢迎 加 入 我 们 a 欢迎 加 入 我 们 


会 员 注 册 


昵称 
241 
验证 邮箱 


= abc@mailcom 


登录 密码 : 


国 再 与 所 请 和 的 属 式 保持 一 致 ，| 


斯 定 


园 读 讨 谱 我 要 但 录 | 找 回 定 码 阅读 协议 我 要 音 录 | | 找 回 密码 


图 3-33 单 击 “确定 ”按钮 提交 表单 时 的 验证 效果 
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川 ) 3.5.2“ 显 式 验 证 


除了 使 用 表单 的 自动 验证 方式 之 外 ， 在 HIML5 中 还 可 以 调用 checkValidity() 函数 显 式 地 
对 表单 中 的 所 有 元 素 内 容 或 者 单个 元 素 内 容 进 行 有 效 性 验证 。 

HTML5 中 的 form 元 素 、 input 元 素 、select 元 素 和 textarea 元 素 都 具有 checkValidity() 函数 ， 
checkValidity() 函数 以 布尔 值 的 形式 返回 验证 结果 ， 如 果 是 true 表示 验证 通过 ， 否 则 表示 验证 
失败 。 另 外 ，form 元 素 和 input 元 素 都 存在 一 个 validity 属性 , 这 个 属性 返回 ValidityState 对 象 。 

【 例 3-20] 

创建 一 个 会 员 登 录 表 单 ， 将 表单 的 novalidate 属性 设置 为 tue， 然 后 在 提交 时 手动 对 昵称 

和 密码 的 非 空 性 进行 验证 。 代 码 如 下 : 


<form action="#" novalidate="true"> 


<h1> 会 员 登 录 </h1> 
<p> 

<label for="username" class="uname" data-icon="u" > 昵称 : </label> 

<input name="username" type="text" placeholder=" 会 员 昵 称 " id="uname" required /> 
</p> 


<p> 
<label for="password" class="youpasswd" data-icon="p"> 密码 : </label> 
<input name="password" type="password" placeholder=" 登录 密码 " id="upass" required /> 
</p> 
<p class="login button"> 
<input type="button" value=" 确定 " onclick="check()"/> 
</p> 
</form> 
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从 上 述 代码 中 可 以 看 到 ， 表 单 禁用 了 验证 功能 ， 因 此 表单 提交 时 昵称 和 密码 都 有 可 能 
空 。 为 了 避免 这 种 情况 ， 需 要 在 单 击 “ 确 定 ”按钮 时 对 它们 的 非 空 性 进行 验证 ， 该 功能 
check() 函数 实现 。check() 函数 的 代码 如 下 : 


<script> 
function check(){ 
var uname = document.getElementByld('uname'); 
var upass = document.getElementByld('upass'); 
if(luname.checkValidity()) 
时 
alert(" 昵称 不 能 为 空 ! "); 
uname.focus(); 
return false; 
} 
if(lupass.checkValidity()) 
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alert(" 密码 不 能 为 空 ! "); 
Upass.focus(); 
return false; 

由 


</script> 


在 浏览 器 中 运行 页 面 ， 登 录 表单 的 初始 效果 如 图 3-34 所 示 ， 图 3-35 为 验证 密码 时 的 
效果 。 


交 | 三 


4 23 Dfile///D:/HtmlSpace/code3/10/index1.html 


芝 
和 eV/WDVHtmlspace/code3/1O/indexl.html 上 的 网 页 显示 : 


局 Cs 
会 员 登 录 本 


药 止 此 页 再 旦 示 对 身 框 . 


确定 


我 要 福 册 | 找 回 密码 本 我 要 注册 | | 找 回 密码 


图 3-34 登录 表单 的 初始 效果 图 3-35 ”验证 密码 时 的 效果 


只 )》 3.5.3 自 定义 验证 


HTML5 不 仅 提 供 了 自动 验证 和 显示 验证 ， 同 时 还 提供 了 对 input 元 素 的 输入 内 容 
进行 有 效 性 检查 的 功能 ， 如 果 检 查 不 通过 ， 浏 览 器 会 显示 错误 的 提示 信息 。 但 是 很 多 时 
候 开 发 人 员 希 望 使 用 自 定义 的 信息 作为 错误 提示 ， 这 时 就 需要 使 用 setCustomValidityO 
函数 。 

setCustomValidity() 函数 适用 于 HTML5 中 的 所 有 input 元 素 ， 通 常 都 是 结合 JavaScript 脚 
本 来 调用 setCustomValidity0 函数 。 例 如 ， 要 验证 表单 中 密码 的 长 度 是 否 符合 规定 的 长 度 ， 
JavaScript 代码 如 下 : 
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<script type="text/javascript" language="javascript"> 
function check(){ 
var uname = document.getElementByld("uname"); 


var upass = document.getElementByld("upass"); 


if(upass.value.length < 6) // 判断 密码 长 度 是 否 正确 
{ 

upass.setCustomValidity(" 请 输入 6 位 以 上 密码 ， 忘 记 请 使 用 找 回 功能 "); 
| 
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else{ 
upass.setCustomValidity(""); 
} 
} 


</script> 


如 图 3-36 所 示 为 表单 提交 时 显示 自 定义 验证 信息 的 效果 。 


和 © DD file///D:/HtmlSpace/code3/10/index2.html 


-二 
会 员 登 录 


= 


回 请 输入 6 位 以 上 密码 ,忘记 请 使 用 
找 回 功能 


我 要 注册 。 找 回 密码 


图 3-36 自 定义 验证 信息 


咱 》3.5.4 取消 验证 

HTML5 为 表单 增加 了 一 个 novalidate 属性 ， 该 属性 用 于 取消 对 表单 全 部 元 素 的 有 效 性 验 
证 。 默 认 情 况 下 ， 该 属性 的 值 为 flse， 则 在 提交 时 对 每 个 元 素 都 进行 内 容 检 查 ， 只 有 所 有 元 
素 都 相符 ， 表 单 才 能 提交 ， 否 则 就 会 提示 错误 信息 。 

如 果 不 想 对 表单 元 素 进行 验证 ， 可 以 为 form 添加 novalidate 属性 ， 并 设置 值 为 tue， 从 
而 使 表单 提交 时 的 验证 失效 。 代 码 如 下 : 


<form id="form1" name="form1" method="post" action="#" novalidate="true">…</form> 


1 a 二 二 


人 8) 3.6 ”实践 案例 : 设计 用 户 录入 表单 


HTMLS gy 得 在 表单 交互 过 程 中 ， 程 序 对 数据 的 验证 不 再 需要 程序 员 编写 大 量 的 
JavaScript 代码 ， 提 高 了 开发 的 效率 。 
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本 案例 将 综合 本 章 所 学 的 知识 设计 一 个 用 户 录入 表单 ， 加 深 读者 对 这 些 知识 的 理解 。 如 
3-37 所 示 为 用 户 录入 表单 的 最 终 效果 。 


La _ 
口 后 台 x 
€ CG | © file:///E:/ 书 稿 /HTML5/ 源 代码 /code3/anli/index.html 


人 @ 念 治 污 减 四 网 格 化 管理 信息 平台 。 入)wer .mn ( 


The reduction of the pollution treatment haze grid management informati 


得 首页 > 用 户 管理 、 添加 新 用 户 
角色 姓名 手机 号 


所 有 医 司 


真实 姓名 请 输入 真实 姓名 
登录 密码 


角色 
部 门 


联系 电话 


联系 邮箱 
SE 年 /月 /日 
EH [文件 | 未 洁 反 任何 文 件 
就 职 日 其 5 年 | 肤 泽 月 份 ] "| 月 日 


图 3-37 用 户 录 入 表单 的 最 终 效果 
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主要 实现 步骤 如 下 。 
加 碍 新 建 一 个 HTML5 页 面 ， 在 合适 位 置 添加 一 个 form 表单 。 在 表单 中 添加 用 于 输入 用 
户 真实 姓名 的 input 元素， 代码 如 下 : 


<form action="#" method="get"> 
<div class="form-group"> 
<label class="col-sm-2 ”col-sm-offset-2 control-label"> 真实 姓名 </label> 


<div class="col-sm-6"> 


<input id="uname" type="text" class="form-control” placeholder=" 请 输入 真实 姓名 " autofocus 
required> 
</div> 
</div> 
</form> 


如 上 述 代 码 所 示 ，input 元 素 的 autofocus 属性 使 页 面 打 开 后 自动 获得 焦点 ，required 属性 
限制 真实 姓名 不 能 为 空 ，placeholder 属性 显示 了 一 个 提示 用 户 输入 内 容 的 信息 。 

国 加 添加 用 于 设置 登录 密码 的 input 元 素 ， 要 求 密码 不 能 为 空 ， 并 且 长 度 为 6 一 15 位 。 
代码 如 下 : 
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<div class="form-group"> 
<label class="col-sm-2 col-sm-offset-2 control-label"> 登录 密码 </label> 


<div class="col-sm-6"> 


<input id="upass" type="password" class="form-control" placeholder=" 请 输入 登录 密码 " 
pattern="\w{6,15}" required > 
</div> 
</div> 


加 3 添加 用 于 选择 用 户 角色 的 单 选 按钮 组 ， 代 码 如 下 : 


<div class="form-group"> 
<label class="col-sm-2 col-sm-offset-2 control-label"> 角色 </label> 
<div class="col-sm-6 "> 
<label> <input type="radio” name="role” /> 系统 管理 员 </label> 
<label> <input type="radio” name="role" /> 网 格 长 </label> 
<label> <input type="radio” name="role” /> 区 域 负责 人 </label> 
</div> 
</div> 


国难 添加 用 于 设置 用 户 所 在 部 门 的 下 拉 列 表 ， 代 码 如 下 : 


<div class="form-group"> 
<label class="col-sm-2 col-sm-offset-2 control-label"> 部 门 </label> 
<div class="col-sm-6 "> 
<select id="province" class="form-control"> 
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<optgroup label=" 总 公司 "> 


1d 


<option > 市 场 </option> 
<option> 要 客 </option> 
<option> 综合 </option> 
</optgroup> 

<optgroup label=" 东区 "> 
<option > 党 群 </option> 
<option> 人 力 </option> 
<option> 财务 </option> 
</optgroup> 

</select> 
</div> 


</div> 


如 上 述 代码 所 示 , 在 select 元 素 中 府 入 optgroup 元 素 将 部 门 分 为 “总 公司 ”和 “东区 ”两 组 。 
8 添加 用 于 输入 用 户 联系 电话 的 input 元 素 ， 要 求 不 能 为 空 ， 且 必须 是 手机 格式 或 者 固 
定 电话 格式 。 代 码 如 下 : 


83 国 
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<div class="form-group"> 
<label class="col-sm-2 col-sm-offset-2 control-label"> 联系 电话 </label> 
<div class="col-sm-6"> 
<input id="uphone" class="form-control" type="telephone" pattern="^\d{3}-\d{8}|\d{4}-\d{7}$" 
name="telephone" placeholder=" 请 输入 固定 电话 或 者 手机 号 码 " required> 
</div> 


</div> 


看 添加 用 于 输入 用 户 联系 邮箱 的 input 元 素 ， 要 求 不 能 为 空 ， 且 人 允许 输入 多 个 值 。 代 码 
如 下 : 


<div class="form-group"> 
<label class="col-sm-2 col-sm-offset-2 control-label"> 联系 邮箱 </label> 
<div class="col-sm-6"> 
<input type="email" class="form-control" placeholder=" 请 输入 有 效 的 电子 邮箱 " multiple 
required> 
</div> 
</div> 


辐 双 使 用 date 类 型 的 input 元 素 实现 一 个 设置 用 户 出 生日 期 的 选项 。 代 码 如 下 : 


<div class="form-group"> 
<label class="col-sm-2 col-sm-offset-2 control-label"> 出 生日 期 </label> 
<div class="col-sm-6"> 
<input type="date" class="form-control" required/> 
</div> 
</div> 
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旺 添加 一 个 允许 用 户 选择 多 个 照片 进行 上 传 的 input 元 素 。 代 码 如 下 : 


<div class="form-group"> 
<label class="col-sm-2 col-sm-offset-2 control-label"> 证 件 照 片 </label> 
<div class="col-sm-6"> 
<input type="file" name="images" class="form-control” multiple="multiple" /> 
</div> 
</div> 


加 路 添加 用 于 设置 用 户 就 职 日 期 的 选项 。 代 码 如 下 : 


<div class="form-group"> 
<label class="col-sm-2 col-sm-offset-2 control-label"> 就 职 日 期 </label> 
<div class="col-sm-6"> 
<input type="text" id="nYear” maxlength="4" placeholder=" 请 输入 年 份 /> 年 
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<select id="nMonth" > 


在 上 述 代码 中 ，maxlength 


<option value="" selected="selected">[ 选择 月 份 ]</option> 


<option value="0"> 一 月 </option> 


<option value="1"> 二 月 </option> 


<option value="2"> 三 月 </option> 


<option value="3"> 四 月 </option> 


<option value="4"> 五 月 </option> 


<option value="5"> 六 月 </option> 


<option value="6"> 七 月 </option> 


<option value="7"> 八 月 </option> 


<option value="8"> 九 月 </option> 


<option value="9"> 十 月 </option> 


<option value="10"> 十 一 月 </option> 


<option value="11"> 十 二 月 </option> 
</select> 月 


<input id="nDay" 


</div> 


最 小 值 是 1， 最 大 值 是 31。 
iD) 经 过 前 面 几 个 步骤 的 设计 ， 用 户 资料 的 录入 表单 就 制作 完成 了 。 最 后 ， 向 表单 中 添 


加 三 个 


于 提交 的 按钮 ， 代 码 如 下 : 


<div class="form-group"> 


<div class="col-sm-5" style="padding:10px"> 


type="number" min="1" max="31" step="1"/> 日 </div> 


属性 限制 年 份 最 大 是 4 位 数字 ， 月 份 是 一 个 下 拉 列 表 ; 日 期 的 


<button type="submit" class="btn btn-primary btn-block btn-md" onclick="check()"> 确 定 </button> 


</div> 


</div> 


上 有 在 单 击 “确定 ”按钮 提交 时 会 先 执行 check0 函数 ， 该 函数 用 于 对 真实 姓名 、 密 码 和 


联系 


电话 进行 自 定义 验证 ， 代 码 如 下 : 


<script> 


function check(){ 
var uname = document.getElementByld('uname'); 
var upass = document.getElementByld('upass'); 
var uphone = document.getElementByld('uphone'); 


if(uname.validity.value Missing) 


{ 

uname.setCustomValidity(" 员工 真实 姓名 不 能 为 空 "); 
} 
else{ 
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uname.setCustomValidity(""); 


if(upass.validityvalueMissing || upass.validity.patternMismatch == true) 


{ 


upass.setCustomValidity(" 请 输入 6 至 15 位 的 密码 "); 


b 


else{ 


upass.setCustomValidity("™"); 


1 


if(uphone.validityvalueMissing || uphone.validity.patternMismatch == true) 


tl 


uphone.setCustomValidity(" 支持 格式 : XXX-XXXXXXXX 和 XXXX-XXXXXXX"); 


} 
else{ 


uphone.setCustomValidity("™"); 


} 
} 


</script> 


加 保存 以 上 对 页 面 的 修改 ， 然 后 在 浏览 器 中 查看 效果 。 如 图 
件 时 的 自 定义 验证 提示 ， 图 3-39 所 示 为 部 门 选择 时 的 效果 ， 


图 3-41 所 示 为 设置 就 职 日 期 的 效果 。 


育 实 姓名 
悦 录 密码 
角色 

部 门 

联系 电 活 
联系 邮 笨 
出 生日 且 
证 人 照片 
就 了 日 用 


让 实验 名 
章 录 宣 加 
角色 

部 站 

联系 电话 
联系 邮箱 
出 生日 央 
证 件 照片 
残阳 日 贿 


系统 管理 品 避 网 格 长 了 
四 请 纳入 6 至 15 位 的 杰 码 


市 志 


年 /月 /日 


| 进 近 文件 | 丰 符 择 任 何 文 件 
年 | 造 各 请 份 |” 月 日 


图 3-38 ”验证 密码 效果 


年 /月 /日 


这 汉文 件 | 未 于 怪人 


图 3-40 ”验证 邮箱 效果 


育 立 中 名 
如 录 直 三 


角色 
0] 


联系 电话 
联系 好 箱 
出 生日 其 
十 科大 片 
加 日 关 


图 3-41 


i 


3-38 所 示 为 密码 不 符 


系统 管理 员 针 网 发 自 区 二 负责 人 


2000/01/02 


| 于 人 御 | 未 二手 何 


DE]EE:E 


设置 就 职 日 期 效果 


合 条 


图 3-40 所 示 验 证 邮箱 时 的 提示 ， 


o> 
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3.7 练习 题 


有 本 
true。 
2 


3 


4. 
3 


有 效 性 验证 。 
二 、 选 择 题 


JovmrroNnmPrINmP oN mFPO INmPr 


、 填 空 题 


如 果 人 允许 用 户 输入 一 串 用 逗号 分 隔 的 邮箱 地 址 ， 那 么 应 该 将 属性 值 设 为 


如 果 要 关闭 输入 文本 时 的 提示 下 拉 列 表 ， 应 该 将 autocomplete 属性 值 为 
为 了 实现 验证 电话 号 码 的 功能 , 需要 将 类 型 与 pattern 属性 一 块 使 用 。 
使 用 类 型 限制 输入 范围 时 会 显示 一 个 滚动 的 滑 块 。 

如 果 需 要 为 表单 添加 手动 的 验证 方式 ， 需 要 在 表单 提交 时 调用 方法 进行 


如 果 要 实现 一 个 用 于 输入 数字 的 文本 框 ， 应 该 使 用 类 型 。 


. Color 


date 

email 

number 

下 列 不 属于 HTMLS5 中 表单 日 期 类 型 的 是 
day 

date 

time 

week 


下 列 选 项 中 不 属于 HTML5 中 新 增 类 型 的 是 


. Color 


email 
number 


. password 


.可 以 自动 验证 邮箱 地 址 是 否 符合 正确 格式 的 是 类 型 。 


emall 
url 
range 


. Search 
.假设 要 限制 表单 的 元 素 不 能 为 空 ， 应 该 使 用 属性 。 
. disabled 


form 


. pattern 
. required 
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一 


6. 在 下 面 代码 的 空白 处 使 用 


<input type="password" 1d="pwd" 


A, 
B. 
他。 
D. 


autocomplete 
datalist 
pattern 
readonly 


匹配 的 格式 才能 提交 。 


属性 ， 可 以 限制 input 元 素 必须 输入 
="[0-9] {6.10}"/> 


< 上 机 练习 : 设计 用 户 资料 修改 表单 


根据 本 章 学 习 的 知识 以 及 3.6 节 的 内 容 ， 本 次 上 机 练习 要 求 读者 设计 一 个 用 户 资料 修改 


表单 。 表 单 的 各 种 元 素 及 最 终 效果 如 图 3-42 所 示 。 


二 i EE 
二 了 也 修改 用 户 个 人 资料 x 和 
三 © [file///D:/html5/formtest/example.html 7 三 
修改 或 者 完善 用 户 个 人 资料 
O 用 户 登 录 名 : hellome@163.com (不 能 修改 ， 只 能 查看 ) 
nN 真实 姓名 : [小 家 姘 (必须 情 写 ， 只 能 输入 汉字 ) 
0 真实 年 龄 : |24 (必须 填写 ) 
十 出 生日 期 : |1990/10/10 (必须 填写 ) 
ny 电子 邮箱 : |loveme@163.com,loveyou@163.com 《必须 填写 ) 
< 身份 证 号 : |4158 ] (必须 填写 ， 能够 以 数字 或 字母 结尾 的 短 身 份 证 号 ) 
Dn 手机 号 码 : |12136987458 回 请 与 所 请 求 的 格式 保持 一 致 。 与， 手机 号 码 必须 以 13、14、15 和 18 开 头 ) 
© 个 人 主页 : 7 
幸运 颜色 : 《 选 十) 
SS | 提交 | | 重 加 
图 3-42 表单 效果 


在 HTML5 规范 出 现 之 前 ， 设 计 者 如 果 希 望 在 网 页 上 播放 视频 和 音频 ， 通 常 需要 借助 第 三 
方 插件 ， 例 如 Flash。 除 此 之 外 ， 设 计 者 也 可 以 使 用 自主 研发 的 多 媒体 播放 插件 。 但 是 无 论 
使 用 哪 种 方式 ， 都 需要 在 浏览 器 上 安装 插件 ， 而 不 是 由 浏览 器 本 身 提供 支持 。 因 此 ， 这 些 方 
式 使 用 起 来 比较 烦琐 ， 还 容易 导致 安全 性 问题 。 

HTML5 规范 的 出 现 改变 了 这 种 现状 , HTML5 新 增 了 video 元 素 和 audio 元 素 , 通过 这 两 个 
元 素 可 以 在 HTML 页 面 上 播放 视频 和 音频 。 使 用 这 两 个 元 素 播 放 多 媒体 时 无 须 安装 任何 插件 ， 
只 要 浏览 器 本 身 支 持 HTML5 规范 即 可 。video 元 素 和 audio 元 素 的 使 用 方法 非常 简单 ， 而 且 
目前 主流 浏览 器 都 支持 它们 ， 本 章 将 详细 介绍 这 两 个 元 素 的 具体 应 用 。 


心 | 本 章 学 习 要 点 
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0 
7) 4.1 多 媒体 简介 


HTML4 之 前 的 版 本 中 多 媒体 所 用 的 代码 复杂 、 宛 长 且 依赖 第 三 方 插件 ，HIMLS 中 引入 
video 元 素 和 audio 元 素 解决 了 此 问题 。HIML5 不 需要 用 户 下 载 第 三 方 插件 来 观看 网 页 中 的 
多 媒体 内 容 ， 并 且 视 频 和 音频 播放 器 更 容易 通过 脚本 访问 。 

虽然 HIMLS 的 视频 和 音频 理论 上 是 非常 优秀 的 ， 但 在 实际 操作 中 并 没有 那么 简单 。 在 
用 HTMLS5 创建 视频 和 音频 时 需要 考虑 多 媒体 的 新 元 素 、 浏 览 器 的 支持 情况 ， 以 及 视频 和 音 
频 的 解码 器 等 众多 因素 。 


川 )》 4.1.1 多 媒体 编 解 码 器 


所 谓 编 码 器 和 解码 器 其 实 都 是 一 种 算法 ， 作 用 是 对 一 段 特 定 的 多 媒体 文件 〈 可 能 是 视频 ， 
也 可 能 是 音频 ) 进行 编码 和 解码 操作 ， 以 便 多 媒体 内 容 能 正常 呈现 出 来 。 编 解码 器 可 以 读 惟 
特定 的 容器 格式 ， 按 照 接 收 方式 把 编码 过 的 数据 重组 为 原始 的 媒体 数据 。 

全 视频 编 解码 器 

视频 编 解 码 器 定义 了 多 媒体 数据 流 编码 和 解码 的 算法 。 编 解码 器 可 以 对 数据 流 进 行 编 
码 ， 使 之 用 于 传输 、 存 储 或 加 密 ， 或 者 可 以 对 其 解码 进行 回放 或 编辑 。 在 HIML5 中 使 用 视 
频 最 应 该 关注 的 是 对 数据 流 的 解码 以 及 回放 。 使 用 最 多 的 HIMLS 视频 解码 文件 是 H.264、 
Ogg Theora、WebM 和 VP8。 


上 音频 编 解码 器 
音频 编 解码 器 与 视频 编 解码 器 的 工作 理论 是 一 样 的 。 音 频 播放 器 主要 涉及 的 是 声 流 而 不 
是 视频 帧 ， 使 用 最 多 的 音频 编 解码 器 是 AAC、MPEG-3 和 Ogg Vorbis。 
video 元 素 或 audio 元 素 添加 的 视频 或 音频 文件 若 要 在 Web 页 面 中 加 载 播放 ， 必 须 使 
正确 的 多 媒体 格式 。 不 同 的 浏览 器 对 video 元 素 和 audio 元 素 的 支持 情况 也 不 相同 。 下 面 介绍 
HTML5 中 视频 和 音频 的 一 些 常见 格式 。 


咱 ) 4.1.2 ”视频 格式 

视频 格式 包含 视频 编码 、 音 频 编码 和 容器 格式 ， 编 码 方式 又 包含 编码 和 解码。 视频 编码 
作为 动词 ， 指 的 是 将 动态 的 图 像 信息 转化 为 二 进 制 数据 的 过 程 ， 其 逆 过 程 称 为 视频 解码 。 视 
频 编码 作为 名 词 则 通常 指 的 是 某 种 特定 的 编码 方式 。 同 样 的 概念 也 适用 于 音频 编码 ， 只 不 过 
它 转 化 的 是 声音 信息 。 大 多 数 视频 文件 都 同时 包含 视频 和 音频 ， 因 此 编码 后 至 少 都 有 两 组 二 
进 制 数据 ， 并 且 两 组 数据 必须 按照 特定 的 方式 同步 ， 否 则 Web 用 户 看 到 的 画面 和 听 到 的 声音 
将 不 同步 。 

在 HIML5 中 ，video 元 素 支 持 的 视频 格式 及 浏览 器 支持 情况 如 表 4-1 所 示 。 

表 4-1 HTML5 视频 格式 说 明 


105 及 页 版 本 | 0 及 间 训 上 本 


无 5.0 及 更 高 版 本 
无 5.0 及 更 高 版 本 
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H.264 9.0 及 更 高 版 本 
MPEG-4 9.0 及 更 高 版 本 
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( 续 表 ) 


视频 格式 ”| Internet Explorer 浏览 器 Firefox 浏览 器 Opera 浏览 器 Chrome 浏览 器 
WebM 9.0 及 更 高 版 本 4.0 及 更 高 版 本 10.6 及 更 高 版 本 | 6.0 及 更 高 版 本 


表 4-1 中 视频 格式 的 具体 说 明 如 下 。 

@ ”Ogg 是 带 有 Theora 视频 编码 和 Vorbis 音频 编码 的 Ogg 文件 。 

e HH.264 是 目前 公认 效率 最 高 的 视频 编码 。 它 是 由 国际 电信 联盟 电信 标准 部 (ITU-T ) 和 国 
际 标准 化 组 织 / 国际 电工 委员 会 动态 图 像 专家 组 ( ISOTIEC MPEG ) 共同 开发 的 一 种 视频 压 
缩 技术 , 它 的 另外 一 个 名 称 是 MPEG-4 AVC。 目前 H.264 被 广泛 运用 在 蓝光 电影 、 数 字 电 视 、 
卫星 电视 、 网 络 媒体 等 领域 。 可 以 说 H.264 是 目前 运用 得 最 为 广泛 的 视频 编码 。 

e@ MPEG-4 是 ISOTEC 标准 的 视频 、 音 频 编码 标准 ， 通 常 也 是 MP4 文件 。 

@ WebM 是 Google 基于 开源 容器 格式 Matroska ( .mkv ) 专门 开发 的 一 种 新 型 容器 格式 。 其 
目的 是 用 来 封装 VP8 编码 的 视频 和 Vorbis 编码 的 音频 数据 以 供 网 络 媒体 使 用 。 


川 ) 4.1.3 ”音频 格式 
在 HTML5 中 ，audio 元 素 支持 的 音频 格式 及 浏览 器 的 支持 情况 如 表 4-2 所 示 。 
表 4-2 支持 audio 格式 的 浏览 器 


音频 格式 | Intemet Explorer 浏览 器 Opera 浏览 器 | Chrome 浏览 器 


Wav PCM | 9.0 及 更 高 版 本 10.5 及 更 高 版 本 | 无 
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WebM 音 频 | 无 。 | 40 及 更 高 版 本 | 10.6 及 更 高 版 本 | 60 及 更 高 版 本 


关于 表 4-2 中 一 些 音频 格式 的 介绍 如 下 。 

”Vorbis 是 类 似 AAC 的 一 种 免费 、 开 源 的 音频 编码 ， 由 非 营 利 组 织 Xiph 开发 。 业 界 的 普 
遍 共识 是 ，Vorbis 和 AAC 一 样 优秀 ， 是 用 以 替代 MP3 的 下 一 代 音 频 压缩 技术 。 

e AAC 是 ISOTEC 标准 化 的 音频 编码 。 它 是 比 MP3 更 先进 的 音频 压缩 技术 ， 目 的 在 于 取代 
陈旧 的 MP3 。AAC 音频 编码 被 广泛 运用 在 数字 广播 、 数 字 电视 等 领域 。 


- 俱 注 意 - 一 一 一 一 一 一 一 一 一 一 一 一 —— 


\ 在 页 面 上 加 载 的 视频 或 音频 格式 必须 是 HTMLS5 中 支持 的 多 媒体 格式 。 


7 4.2 播放 视频 


上 一 节 学 习 了 HIMLS 中 播放 视频 的 一 些 基础 知识 。 本 节 会 详细 介绍 如 何 使 用 video 元 
素 控制 视频 ， 如 设置 视频 的 来 源 、 暂 停 播 放 、 调 整 视频 宽度 以 及 音量 等 。 
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RE 
video 元 素 的 基础 用 法 


HTML5 规定 了 一 种 通过 video 元 素 包 含 视频 的 标准 方法 ，video 元 素 的 不 同 
频 不 同 的 播放 特性 。 例 如 ，height 


叫 ) 4.2.1 


属性 表示 视 
属性 表示 视频 播放 器 的 


属性 表示 视频 播放 器 的 高 度 ，width 


宽度 等 。 表 4-3 列 出 了 video 元 素 的 常用 属性 。 


表 4-3 video 元 素 的 属性 


属性 名 称 属性 说 明 

autoplay 表示 当前 网 页 完成 载 入 后 自动 播放 

controls 表示 显示 视频 控制 条 ， 如 播放 按钮 、 停 止 按钮 等 

loop 表示 视频 结束 时 重新 开始 播放 

表示 是 否 在 页 面 加 载 完成 后 载 入 视频 ， 如 果 使 用 了 autoplay， 则 忽略 该 属性 。 

可 选 值 有 none、metadate 和 auto， 默 认 值 是 auto 

src 获取 或 者 设置 所 播放 视频 的 URL 地 址 

buffered 获取 一 个 实现 TimeRanges 接口 的 对 象 ， 以 确认 浏览 器 是 否 已 缓冲 媒体 数据 

currentTime 获取 多 媒体 文件 当前 播放 时 间 ， 也 可 以 修改 该 时 间 属 性 

startTime 获取 多 媒体 开始 播放 的 时 间 

duration 获取 多 媒体 元 素 总 体 播放 的 时 间 

played 获取 多 媒体 文件 已 播放 完成 的 时 间 段 

paused 获取 当前 播放 的 文件 是 否 处 于 暂停 状态 

ended 获取 当前 播放 文件 是 否 结束 

playbackRate 获取 当前 正在 播放 的 多 媒体 文件 的 速度 频率 

volume 获取 或 者 设置 多 媒体 元 素 播放 的 音量 

muted 获取 或 者 设置 当前 是 否 为 静音 

height 获取 或 者 设置 视频 播放 器 的 高 度 

width 获取 或 者 设置 视频 播放 器 的 宽度 
旨 定 一 张 视频 数据 无 效 时 显示 的 图 片 〈 视 频数 据 无 效 可 能 是 视频 正在 加 载 ， 也 

人 可 能 是 视频 地 址 错误 ) 

oi 获取 视频 文件 的 网 络 状态 ， 有 4 个 值 : 0 (尚未 初始 化 ) 、1 (加 载 完 成 ， 网 络 
空闲 )、2 (视频 加 载 中 ) 和 3 (加 载 失败 ) 

readyState 返回 媒体 当前 播放 位 置 的 就 绪 状 态 

os 只 读 属性 。 在 多 媒体 元 素 加 载 或 读 取 文件 过 程 中 ， 如 果 出 现 错误 ， 将 触发 元 素 
的 error 事件 。 通 过 元 素 的 error 属性 返回 当前 的 错误 值 

erititpeihy adi ep 即 默认 播放 速率 。 一 般 情况 下 ， 该 属 
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一 一 


【 例 4-1]】 
使 用 video 元 素 创 建 视频 播放 器 ， 播 放 video/mov_bbb.mp4 文件 。 代 码 如 下 : 


<video height="300" src="video/mov_bbb.mp4" width="600" autoplay="true" loop="true" controls= 


"true "></video> 


上 述 代 码 设置 视频 播放 器 的 高 度 为 300 像素 、 宽 度 为 600 像素 ，autoplay 属性 值 为 rue 
表示 载 入 视频 后 自动 播放 ，loop 属性 值 为 true 表示 在 视频 结束 时 自动 重播 ，controls 属性 值 
为 true 表示 视频 播放 时 显示 控制 条 。 如 图 4-1 所 示 为 Chrome 浏览 器 中 的 播放 效果 ， 如 图 4-2 
所 示 为 正 浏览 器 中 的 播放 效果 。 


人 HTML StynFkEk 
€ 3 CC | tley//D/HtmlSpace/coded/1/index html 


(CD ooo02 


图 4-1 Chrome 浏览 器 播放 视频 效果 图 4-2 下 浏览 器 播放 视频 效果 


【 例 4-2】 

如 果 用 户 需 要 为 视频 文件 提供 至 少 两 种 不 同 的 解码 器 才能 覆盖 所 有 支持 HTMLS5 的 浏览 
器 ， 就 需要 用 到 source 元 素 。source 元 素 可 以 用 来 链接 不 同 的 媒体 文件 ， 例 如 音频 和 视频 。 
source 元 素 常用 的 属性 如 下 。 

e@ src 提供 媒体 源 的 URL 地 址 。 

e@ type 包含 媒体 源 的 播放 类 型 ， 通 常 出 现在 视频 格式 中 。 

e media 包含 制定 媒体 源 所 匹配 的 编 解 码 器 信息 。 

Video 元 素 允 许 有 多 个 source 元 素 , 浏览 器 将 选择 第 一 个 可 识别 格式 的 文件 地 址 。 对 例 4-1 
进行 扩展 ， 为 视频 指定 Ogg 和 MP4 两 种 视频 格式 的 文件 。 具 体 代码 如 下 : 
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<videoheight="300" width="600" autoplay="true" loop="true" controls="controls"> 
<source src="video/mov_bbb.mp4" type="video/mp4"> 
<source src="video/mov_bbb.ogg" type="video/ogg"> 
当前 浏览 器 不 支持 HTMIL5 视频 播放 。 


</video> 


执行 上 段 代 码 播放 视频 时 ， 浏 览 器 将 按 source 元 素 的 顺序 检测 其 指定 的 视频 是 否 能 够 正 
常 播放 (可 能 是 视频 格式 不 支持 或 者 视频 不 存在 ) 如 果 不 能 正常 播放 , 则 换 下 一 个 source 元 素 。 
一 旦 找到 ， 就 播放 该 文件 并 忽略 随后 的 其 他 元 素 。 


-个 党 ~----------- -一 一 一 
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川 ) 4.2.2 video 元 素 方法 

在 HIML5 中 ，video 元 素 常 用 的 播放 方法 主要 有 3 种 ， 具 体 说明 如 下 。 

e@ play() 播放 视频 ， 将 paused 属性 的 值 设置 为 false。 

@ pause() 暂停 视频 ， 将 paused 属性 的 值 设置 为 tue。 

e@ load() 重新 载 入 视频 ， 将 defaultPlayBackRate 属性 的 值 赋 给 playbackRate 属性 ， 且 强制 

将 error 属性 的 值 设置 为 null。 
【 例 4-3】 

在 HTMLS5 中 加 载 一 个 视频 ， 用 video 元 素 的 方法 play0、pause0 和 load0 分 别 实现 视频 
的 播放 、 和 暂停 和 重新 播放 功能 。 实 现 该 功能 的 具体 步骤 如 下 。 

园 新 建 HTML5 页 面 ， 在 页 面 的 合适 位 置 添加 1 个 video 元 素 和 4 个 button 元 素 ， 分 
别 用 来 显示 视频 和 对 视频 执行 操作 。 具 体 代码 如 下 : 


<div id="bg"> 
<div id="v"> 
<video id="video1" width="700px" height="350px" controls="controls" autoplay="true"> 
<source src="xiong.webm" type="video/webm" /> 
</video> 
</div> 
<div id="controlbar"> 
<button onclick="playPause()"> 播放 / 暂停 </button> 
<button onclick="again()"> 重新 播放 </button> 
<button onclick="makeBig()"> 大 </button> 
<button onclick="makeSmall()"> 小 </button> 
</div> 
</div> 
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IE@ 双 单 击 “播放 /暂停 ”按钮 时 触 | 如 果 页 面 是 暂停 状态 ， 那 么 使 用 play0 方法 来 
发 onclick 事件 并 调用 JavaScript 脚本 中 的 ; 实现 视频 的 播放 功能 ， 如 果 是 播放 状态 ， 则 
playPause() 函数 ， 该 函数 主要 实现 视频 的 所 使 用 pause0 方法 来 实现 视频 的 暂停 功能 
放 或 暂停 的 功能 。 具 体 代 码 如 下 : 大 可 单 击 “重新 播放 ”按钮 时 也 触发 
nclick 事件 并 调用 JavaScript 脚本 中 的 函数 
。 函 数 again0 中 的 load0 方法 实现 了 


var myVideo=document.getElementByld 


人 机 频 的 重新 播放 功能 ， 具 体 代码 如 下 ， 
function playPause() 
{ function again() 
if (myVideo.paused) { 
myVideo.play(); myVideo.load(); 
else } 


myVideo.pause(); 


四 如 单 击 “ 大 ”和 “小 ”按钮 能 实现 
视频 播放 器 的 大 小 转换 ， 此 功能 调用 的 

上 述 代 码 中 的 playPause0 函数 使 用 了 ; JavaScript 脚本 中 的 函数 分 别 是 makeBig( 和 
pause0 方法 和 play0 方法 。 在 页 面 加 载 视频 后 ，; makeSmall0)。 具 体 代 码 如 下 : 


} 
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function makeBig() 加 号 综合 上 述 4 个 步骤 ， 在 浏览 器 中 查 
{ ”看 效果 ， 如 图 4-3 所 示 。 


myVideo.width=560; 


上 HTML SR 站 


人 已 Dfile/WDYHtmlspace/code4/Uindex2.html 
function makeSmall() | Es Ei 
| 
myVideo.width=320; 
} 
当 视 频 加 载 播放 后 ， 页 面 的 大 小 是 video ， a 


元 素 中 的 默认 值 。 单 击 “ 大 ”按钮 后 播放 器 ; 
的 宽度 调整 为 560 像素 ， 单 击 “ 小 ”按钮 后 | 
播放 器 的 宽度 调整 为 320 像素 。 | 


用 video 元 素 的 方法 实现 视频 的 播放 


图 4-3 


咱 ) 4.2.3 video 元 素 事件 


介绍 video 事件 之 前 ， 我 们 先 了 解 一 下 媒体 事件 的 相关 知识 。 媒 体 事件 是 指 由 视频 、 音 
频 以 及 图 像 等 媒体 触发 的 事件 。 这 些 事件 适用 于 所 有 HTMLS5 元 素 ， 不 过 在 媒体 元 素 (audio、 
embed、img、image 以 及 video) 中 最 为 常用 。 媒 体 事 件 主 要 包括 loadstart、progress、 
suspend、abort、error、emptied、stalled、play、pause、seeking、seeked、timeupdate、 
ended、volumechange 等 。 
Video 元 素 中 常用 的 事件 如 表 4-4 所 示 。 
表 4-4 video 元 素 常 用 事件 
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事件 名 称 事件 描述 
loadstart 浏览 器 开始 请 求 媒体 时 触发 
progress 浏览 器 正在 获取 媒体 数据 时 触发 
suspend 浏览 器 已 经 在 获取 媒体 数据 ， 但 在 取 回 整个 媒体 文件 之 前 停止 时 触发 
about 浏览 器 发 生 中 止 事件 时 触发 
error 获取 媒体 出 错 ， 有 错误 发 生 时 才 触 发 此 事件 
emptied 媒体 资源 元 素 突 然 为 空 时 〔〈 网 络 错误 、 加 载 错误 等 ) 触发 
stalled 浏览 器 获取 媒体 数据 过 程 中 (延迟 0) 存在 错误 时 触发 
play 媒体 数据 即将 开始 播放 时 触发 
pause 媒体 数据 暂停 播放 时 触发 
loadeddata 加 载 当 前 播放 位 置 的 媒体 数据 时 触发 
有 元 素数 据 时 锅 发 此 事件 。 元 素数 据 巴 车 尺 于 、 时 长 和 文件 轨 送 
playing 媒体 已 经 开始 播放 时 触发 
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( 续 表 ) 
事件 名 称 事件 描述 
ee 浏览 器 可 以 开始 媒体 播放 ， 但 以 当前 速率 播放 不 能 直接 将 媒体 播放 完 时 触发 〈 播 
放 期 间 需 要 缓冲 ) 
canplaythrough “| 浏览 器 以 当前 速率 直接 播放 ， 可 以 播放 完整 个 媒体 资源 时 触发 (期 间 不 需要 缓冲 ) 
seeking 当 搜索 操作 开始 时 触发 此 事件 〈seeking 属性 值 为 tue) 
seeked 当 浏 览 器 停止 请 求 数据 ， 搜 索 操作 完成 时 触发 (seeking 属性 值 为 false) 
timeupdate 当 媒 体 改 变 其 播放 位 置 时 触发 
volumechange 音量 (Volume 属性 ) 改变 或 静音 (muted) 时 触发 


【 例 4-4】 
在 例 43 的 基础 上 进行 扩展 ， 监 听 video 元素 的 timeupdate、loadstart、playing、 
volumechange 和 pause 事件 ， 并 显示 这 些 事件 被 触发 的 时 机 。 
第 一 步 是 在 页 面 上 添加 一 个 div 元 素 ， 设 置 该 元 素 的 显示 样式 ， 代 码 如 下 : 


<div id="ret" style="height:300px;background:#cecece;width:200px; overflow-y: scroll;margin- 
left:20px;"></div> 


对 video 元 素 的 各 个 事件 进行 监听 ， 并 在 事件 被 触发 时 显示 到 div 元 素 中 ， 代 码 如 下 : 


var ret=document.getElementByld("ret"); 
myVideo.addEventListener('timeupdate',function(){ 
ret.innerHTML += " 发 生 timeupdate 事件 </br>"; 
bfalse); 
myVideo.addEventListener('"loadstart',function(){ 
ret.innerHTML += " 发 生 loadstart 事件 </br>"; 
bfalse); 
myVideo.addEventListener('playing',function(){ 
ret.innerHTML += " 发 生 playing 事件 </br>"; 
yfalse); 
myVideo.addEventListener('volumechange',function(){ 
ret.innerHTML += " 发 生 volumechange 事件 </br>"; 
}false); 
myVideo.addEventListener('pause',function(){ 
ret.innerHTML += " 发 生 pause 事件 </br>"; 
bfalse); 
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在 浏览 器 中 运行 页 面 ， 待 视频 文件 加 载 完成 后 会 自动 播放 ， 并 将 触发 的 事件 显示 在 右 例 
div 元 素 中 ， 运 行 效果 如 图 4-4 所 示 。 


第 4 章 HTMLS 多 媒体 应 用 


一 一 


六 HTML 5 视频 擅 放 
€ SC Dfile///D:/HtmlSpace/code4/1/index3.html 


重庆 / 特 停 | | 重新 肖 放 | [大 | [小 
发 生 10adstart 事 件 


发 生 timeupdate 事 


外 dat 


只- 提示 = 


playing 和 play 的 区 别 在 于 ， 视 频 循环 或 再 一 次 播放 开始 时 ， 将 不 会 触发 play 事件 ， 但 是 会 触 | 
| 发 playing 事件 。 ) 


7 4.3 ”播放 音频 


和 video 元 素 一 样 ，HTML4 版 本 之 前 的 大 多 数 音频 文件 都 是 通过 第 三 方 控件 来 实现 的 。 
上 节 介 绍 了 如 何 使 用 video 元 素 显 示 视 频 ， 这 节 我 们 介绍 HIML5 中 用 来 显示 音频 的 元 素 
audio。HIML5 规范 定义 了 audio 元 素 对 音频 的 处 理 方法 ， 解 决 了 HIML4 版 本 之 前 只 能 通过 
第 三 方 控件 显示 音频 的 问题 。 


川 ) 4.3.1 audio 元 素 的 基础 用 法 


HTML5 中 的 audio 元 素 能 够 播放 声音 文件 或 者 音频 流 。audio 元 素 的 属性 和 video 元 素 相 
比 少 了 3 个 属性 ， 分 别 是 poster、height 和 width。 除 了 这 3 个 属性 外 ， 其 他 关于 音频 的 属性 
请 参看 4.2.1 节 中 video 的 属性 表 。 

【 例 4-5】 
创建 一 个 示例 ， 使 用 audio 元 素 播放 音频 文件 media/song.mp3， 实 现代 码 如 下 : 
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<audio controls autoplay="autoplay" loop src="media/song.mp3"> 


</audio> 


上 述 代 码 中 的 controls 属性 表示 显示 播放 时 的 控制 条 ，autoplay 属性 表示 视频 在 页 面 加 载 
后 自动 播放 ，loop 属性 表示 视频 结束 后 重新 开始 播放 。 如 图 4-5 所 示 为 Chrome 浏览 器 中 的 


中 


工 
一 
三 
三 
a 
+ 

OO 
0 
JW) 
w 
+ 

CC 
9 

pd 

名 

0 
O 

一 . 
Ee 
La 


HTMLS+C553+JavaScript 网 页 设计 入 门 与 应 用 


一 


播放 效果 ， 如 图 4-6 所 示 为 正 浏览 器 中 的 播放 效果 。 


六 HTML 5 言 产 担 放 x 3 ~ 
ie Oe D evspcevoseraindechn D7 
€ SC [file///D/HtmlSpace/code4/2/indy? 三 
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图 4-5 Chrome 浏览 器 播放 视频 效果 4-6 正 浏 览 器 播放 视频 效果 


audio 元 素 也 支持 source 元 素 ， 下 面 的 示例 代码 演示 了 提供 两 种 音频 格式 时 的 source 元 
素 代码 。 


<audio controls="controls"> 
<source src="/i/song.ogg" type="audio/ogg"> 
<source src="/i/song.mp3" type="audio/mpeg"> 
当前 浏览 器 不 支持 HTML 5 音频 播放 。 


</audio> 


咱 ) 4.3.2 audio 元 素 事件 


前 面 已 经 学 习 了 如 何 使 用 video 元 素 的 事件 显示 视频 的 一 些 操作 。 在 HTML5 中 ，audio 
元 素 具有 与 video 元 素 相同 的 事件 ， 具 体 请 参看 4.2.3 中 的 video 元 素 事件 表 。 
【 例 4-6】 
在 例 4-5 的 基础 上 进行 扩展 ， 添 加 两 个 按钮 来 实现 音频 音量 的 增加 和 减少 ， 并 显示 当前 
的 音量 ， 主 要 步骤 如 下 。 
轿 徐 在 页 面 原来 的 基础 上 增加 两 个 控制 音量 的 按钮 ， 以 及 显示 音量 的 span 元 素 。 具 体 代 
码 如 下 : 


<input id="addvoice" type="button" value=" 音量 +" onclick="addvoice();" /> 
<input id="cutvoice" type="button" value=" 音量 -" onclick="cutvoice();" /> 


<span id="vol"> 当前 音量 : 0</span> 


出 如 单 击 “音量 +” 或 “音量 -” 按 钮 时 将 触发 onclick 事件 ， 它 们 分 别 调用 JavaScript 肢 
本 中 的 addvoice() 函数 和 cutvoice() 函数 。 具 体 代 码 如 下 : 


<script type="text/javascript"> 
var audio=document.getElementByld("audio"); 


var vol=document.getElementByld("vol"); 


vol.innerHTML ”=" 当前 音量 : "+audiovolume.toFixed(2); 
if(audio.canPlayType) 
{ 


audio.addEventListener('volumechange', addvoice,false); 


audio.addEventListener('volumechange', cutvoice,false); 
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function addvoice() // 增加 音量 
L 


if(audio.volume<1){ 
audio.volume+=0.1; 


volume=audio.volume; 


] 
vol.innerHTML ”=" 当前 音量 : "+audio.volume.toFixed(2); 
} 
function cutvoice() // 减少 音 
It 
if(audio.volume>0) { 
audio.volume-=0.1; 
volume=audio.volume; 
} 
vol.innerHTML ”=" 当前 音量 : "+audio.volume.toFixed(2); 
} 
</script> 


上 述 代 码 中 调用 的 canPlayType0 方法 用 
于 测试 浏览 器 是 否 支 持 指定 的 媒体 类 型 。 如 果 
判断 浏览 器 支持 此 媒体 类 型 , 便 会 在 addvoiceO 
函数 和 cutvoice0 函数 分 别 执行 控制 音量 的 
代码 。 


浏览 器 中 的 运行 效果 如 图 4-7 所 示 。 


音量 + | [ 音量 | 当前 音量 ，0. 80 


图 4-7 audio 元 素 事 件 
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7) 4.4 实践 案例 ; 实现 HTML5 网 页 视频 播放 器 


本 章 主要 讲述 HTML5 中 多 媒体 的 支持 ， 包 括 video 元 素 和 audio 元 素 的 属性 、 方 法 及 事 
件 等 知识 。 本 次 案例 将 使 用 video 元 素 相 关 的 属性 、 事 件 和 方法 来 制作 一 个 属于 HIMLS 的 
网 页 视频 播放 器 ， 以 加 深 读者 对 video 元 素 属 性 和 事件 的 理解 。 

加 中 创建 一 个 HIMLS 页 面 ， 在 合适 位 置 添加 Video 元 素 、 视频 控制 按钮 和 状态 显示 区 域 。 
代码 如 下 : 


<div class="ht_video1"> 
<video id="video" src="video/mov_bbb.mp4" width="100%" controls="controls"></video> 
</div> 
<div id="showTime" class="fr"></div> 
<div id="state"> 当前 播放 状态 : </div> 


<div class="clearfix"> 
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<button id="btnPlayOrPause" class="btn" onclick="PlayOrPause()"> 播放 / 暂停 </button> 
<button id="addVolume" class="btn" onClick="AddVolume()"> 增 大 音量 </button> 
<button id="minVolume" class="btn" onClick="MinVolume()"> 减 小 音量 </button> 
<button id="addSpeed" class="btn" onClick="AddSpeed()"> 加 速 播放 </button> 

<button id="minSpeed" class="btn" onClick="MinSpeed()"> 减速 播放 </button> 

<button id="setMuted" class="btn" onClick="SetMuted()"> 设置 静音 </button> 

<button id="playback" class="btn" onClick="PlayBack()"> 回放 </button> 

<button id="btnCatchPicture" class="btn" onclick="CatchPicture()"> 截图 </button> 


</div> 


上 段 代 码 使 用 video 元 素 显 示 了 一 个 视频 文件 。video 元 素 的 controls 属性 显示 播放 器 控件 ， 
autoplay 属性 表示 页 面 加 载 完毕 自动 播放 此 视频 文件 ，width 属性 设置 视频 文件 的 宽度 。 

加 允 新 建 页 面 并 添加 了 8 个 按钮 ， 单 击 某 个 按钮 触发 是 click 事件 ， 调 用 JavaScript 中 的 
不 同 函 数 ， 我 们 在 后 面 会 一 一 讲解 。 页 面 加 载 完 毕 后 JavaScript 中 的 具体 代码 如 下 : 


var video = document.getElementByld("video"); 

var showTime=document.getElementByld("showTime"); 

if(video.canPlayType) 

{ 
video.addEventListener('loadstart',LoadStart,false); 
video.addEventListener('loadedmetadata',loadedmetadata,false); 
video.addEventListener('play',videoPlay,false); 
video.addEventListener('playing',videoPlay,false); 
video.addEventListener('pause',videoPause,false); 
video.addEventListener('ended',videoEnded ,false); 
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video.addEventListener('timeupdate',updateTime,false); 


video.addEventListener('volumechange',VolumeChange,false); 
video.addEventListener("error",catchError,false); 


1 


我 们 知道 事件 的 处 理 方式 有 两 种 ， 本 案例 使 用 监听 方式 进行 处 理 。 页 面 加 载 完 成 时 上 段 
代码 调用 了 video 元 素 的 8 个 事件 。 

加 B 当 浏 览 器 开始 请 求 媒体 时 就 会 触发 loadStart 事件 ， 调 用 LoadStart() 函数 ， 将 当前 播 
放 状 态 的 文本 设置 为 “开始 加 载 ”。JavaScript 中 的 具体 代码 如 下 : 


function LoadStart() 


{ 
document.getElementByld("state").innerHTML = " 当前 播放 状态 :开始 加 载 "; 


} 

看 刀 loadedmetadata 事件 是 其 他 媒体 数据 加 载 完 毕 时 才 触 发 的 。 在 loadedmetadata() 函数 
中 把 当前 的 状态 改 为 “加 载 完 毕 ”， 同 时 调用 video 元 素 的 play0 方法 播放 视频 。JavaScript 
中 的 具体 代码 如 下 : 


转 100 
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的 时 候 更 改 播放 状态 的 值 ， 调 用 对 应 的 方法 。JavaScript 中 的 具体 代码 如 下 : 


的 currentTime 属性 将 当前 时 间 设 置 为 0 并 且 调 用 video 元 素 的 pause0) 方法 暂停 播放 
视频 。 


function loadedmetadatal() 

{ 
var btnPlay=document.getElementByld("btnPlayOrPause"); 
document.getElementByld('state").innerHTML = " 当前 状态 : 加 载 完 毕 "; 
video.play(); 

} 


加 号 play 事件 、playing 事件 、pause 事件 、ended 事件 很 容易 理解 ， 读 者 需要 在 触发 事件 


function videoPlay() 
{ 
document.getElementByld("state").innerHTML = " 当前 播放 状态 : 即将 播放 "; 
} 
function videoPlaying() 
{ 
document.getElementByld("state").innerHTML = " 当前 播放 状态 : 正在 播放 "; 
} 
function videoPause() 
{ 


document.getElementByld("state").innerHTML=" 当前 播放 状态 暂停 播放 "; 
} 


function videoEnded() 
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{ 
video.currentTime = 0; 
video.pause(); 
document.getElementByld("btnPlayOrPause").innerHTML=" 重新 播放 "; 
document.getElementByld("state").innerHTML=" 当前 播放 状态 播放 完毕 "; 
} 


上 上段 代 码 中 ， 视 频 播放 完毕 触发 ended 事件 并 调用 函数 videoEnded 中 )， 它 使 用 video 


而 改变 播放 位 置 时 会 触发 video 元 素 的 timeupdate 事件 ， 调 用 timeUpdate() 函数 ， 这 里 


来 显示 播放 的 时 间 。JavaScript 中 的 具体 代码 如 下 : 


function updateTime() 
video.addEventListener('timeupdate',function(){ 
var durationtime=RumTime(Math.floor(video.duration/60),2)+":"+RumTime(Math.floor(video. 
duration%60),2); 
var currenttime=" 播 放 时 间 : "+RumTime(Math.floor(video.currentTime/60),2)+":"+RumTime(Math. 


floor(video.currentTime%60),2)+"|"+durationtime; 
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document.getElementByld("showTime").innerHTML=currenttime; 
bfalse); 
} 
function RumTime(num,n) 
{ 
var len=num.toString().length; 


while(len<n) 


{ 
区 num="0"+numilen++; 
} 
return num; 
工 } 
| 
三 上 段 代码 使 用 currentTime 属性 获得 当 | break; 
QB 前 播放 的 时 间 ， 使 用 duration 属性 显示 总 | case 3: 
十 体 播 放 时 间 。RumTime(m.n) 函数 用 来 处 理 ， alert(" 解码 失败 。"); 
P|。 时间。 | break; 
六 igm8 音量 改变 或 者 设置 静音 可 以 触发 | case 4: 
PARI volumechange 事件 ， 在 VolumeChange() 函数 | alert(" 媒体 资源 不 可 用 或 媒体 格式 不 被 支 
关中 弹出 “音量 已 经 改变 ， 触 发 volumechange ， 持 。); 
加 。 事件 ”的 提示 。JavaScript 中 的 具体 代码 如 下 break; 
< : } 
EV function VolumeChangel() : } 
w { : 
= alert(" 您 的 音量 已 经 改变 ,触发 5 上 上段 代 码 使 用 eror 属 性 返回 一 个 
- volumechange 事件 "); | MediaError 对 象 ， 使 用 该 对 象 的 code 返回 当 
} ; 前 的 错误 值 ,此 属性 只 能 读 取 , 是 不 可 更 改 的 。 


i; MediaError 对 象 中 的 code 对 应 的 返回 值 只 有 
罗 浏览 器 加 载 过 程 中 如 果 发 生 错 误 就 | 1、2、3、4。 


会 触发 error 事件 ，JavaScript 中 的 具体 代码 ， ” [@ 团 目前 为 止 ， 我 们 把 本 案例 涉及 的 
如 下 : i_ video 元 素 的 事件 已 经 介绍 完毕 ， 下 面 我 们 就 
本 ; 来 看 一 下 本 案例 中 和 页 面 按钮 相关 的 click 事 
; 件 。 如 果 当 前 视频 正在 播放 , 单 击 “ 播放/ 暂停” 
var error=video.error; 芒 包 则 客 生生 训 y 隐 之 则 重 芭 synSpnpt 中 
A 1 的 具体 代 Rs 
switch(error.code) : 的 具体 代码 如 下 : 
{ | function PlayOrPausel() 
case 1: | { 
alert(" 视频 的 下 载 过 程 被 中 止 。"); | if(video.paused) 
break; | { 
Case 2: : document.getElementByld("btnPlayOrPause"). 
alert(" 网 络 发 生 故 障 ， 视 频 的 下 载 过 程 被 :value =" 单 击 暂停 "; 
中 止 。"); : video.play(); 
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jelse | volume=video.volume; 
{ : 1 
document.getElementByld("btnPlayOrPause"). | 
value =" 单 击 播放 "; : 大 友 单 击 “ 加 速 播放 ”或 “减速 播放 ”按钮 ， 
video.pause(); | 实现 视频 的 快速 或 慢 速 播放 功能 。 使 用 video 
} | 元 素 的 palybackRate 属性 来 控制 播放 速度 的 
} | 快慢 。JavaScript 中 的 具体 代码 如 下 : 
上 段 代码 使 用 paused 属性 来 判断 当前 | ”function Addspeed0) 也 
视频 是 否 为 暂停 状态 ， 如 果 为 tue 则 调用 | { 
video 元 素 的 play0 方法 播放 视频 ， 否 则 调用 Me 
pause() 方法 暂停 视频 播放 。 | speed=video.playbackRate; a 
WG) 单 击 “ 增 大 音量 ”或 “ 减 小 音量 "按钮 ， 1 二 
实现 音量 的 增加 或 减 小 功能 。 使 用 volume 属 | function MinSpeed() 三 
性 来 控制 音量 的 大 小 。JavaScript 中 的 具体 代 ， 《 
码 如 下 : | video.playbackRate-=1; 十 
: if(video.playbackRate<0) (@) 
function Addvolume() | video.playbackRate=0; JW) 
{ : speed=video.playbackRate; 0 
if(video.volume<1) | } + 
video.volume+=0.2; | (一 
volume=video.volume; | 古风 单 击 “ 设置 静 音 按 钮 ， 实 现 设 置 吕 
| 播放 视频 的 音量 为 静音 的 功能 。 使 用 muted ”由 
function MinVolumel) | 属性 判断 当前 视频 是 否 处 于 静音 模式 ， 如 果 加 
{ | 为 true 将 按钮 链接 改 为 “取消 静音 ”， 反 之 让 
if(video.volume>0) | 改 为 “设置 静音 ”， 同 时 更 改 muted 对 应 的 值 。 二” 
video.volume-=0.2; : se 中 的 具体 代码 如 下 : Lg 
function SetMuted() 
{ 
if(video.muted) 
四 
video.muted = false; 
document.getElementByld("setMuted").innerHTML = " 取消 静音 "; 
jelse 
video.muted = true; 
document.getElementByld ("setMuted").innerHTML = " 设置 静音 "; 
) 
} 
加 有 单 击 “ 回 放 ” 或 “取消 回放 ”按钮 ， 调 用 JavaScript 中 的 内 置 函数 setInterval() 和 
clearInterval()。setInterval() 函数 在 运行 时 会 按照 规定 的 事件 间隔 一 次 性 将 列 出 的 参数 传递 给 
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指定 的 函数 ，clearInterval() 函数 则 是 清除 setInterval( 函数 的 调用 。JavaScript 中 的 具体 代 


码 如 下 : 


function PlayBack(){ 
var playBackBtn=document.getElementByld("playback"); 
if(playBackBtn.innerHTML==" 回放 ") 


{ 
functionld=setlnterval(playBack1,200); 
playBackBtn.innerHTML=" 取消 回放 "; 
} 
else 
{ 
clearlnterval(functionld); 
playBackBtn.innerHTML=" 回放 "; 
} 


} 
function playBack1() 


{ 
var playBackBtn=document.getElementByld ("playback"); 


if(video.currentTime==0) 


{ 
playBackBtn.innerHTML=" 回放 "; 
clearlnterval(functionld); 

} 

else 


video.currentTime-=1; 


} 


和 双 单 击 “ 截 图 ”按钮 实现 对 当前 播放 视频 的 截图 功能 。 分 别 使 


videoWidth 和 


videoHeight 属性 获得 视频 的 长 度 和 宽度 ， 使 用 canvas 元 素 绘 制 在 页 面 上 截取 的 图 片 ( 下 一 章 
会 详细 介绍 ， 本 章 就 不 再 详细 介绍 ) 。JavaScript 中 的 具体 代码 如 下 : 


function CatchPicture() 

| 
var canvas=document.getElementByld ("canvas"); 
var ctx=canvas.getContext('2d'); 
canvas.width=video.videoWidth; 
canvas.height=video.videoHeight; 
ctx.drawlmage(video,0,0,canvas.width,canvas.height); 


canvas.style.display="block"; 
} 


至 此 ， 本 章 的 案例 已 经 完成 ， 通 过 这 个 案例 的 学 习 ， 相 信 读 者 一 定 会 有 新 的 收获 。 本 次 


动手 操作 案例 运行 的 效果 如 图 4-8 所 示 。 
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当前 播放 状态 : 暂停 播放 播放 时 间 ; 00:04|00:10 
播放 /车 停 。 增 大 音量 减 小 音量 。 加 速 播放 。 “减速 潘 放 。 设置 静音 回放 截图 


图 4-8 网 页 视频 播放 器 
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一 、 填 空 题 

1. 要 设置 视频 或 音频 为 静音 需要 使 用 属性 。 

2. 在 下 面 的 代码 空缺 处 中 填写 一 个 video 元 素 的 属性 ， 使 视频 可 以 加 载 页 
面 后 自动 播放 。 


1dloSeAer+SsSSIOI+S1WNLH 人 


<video id="video1" src="xiong.webm" loop="true" controls ></video> 


ER 元 素 用 来 链接 不 同 的 文件 。 

4. 音频 或 者 视频 结束 时 重新 开始 播放 指 的 是 属性。 

5. 改变 音量 或 者 设置 静音 可 以 触发 video 元 素 或 audio 元素 的 事件 。 
二 、 选 择 题 

判断 当前 视频 是 否 处 于 暂停 状态 ， 使 用 

autoplay 属性 

play 属性 

paused 属性 

muted 属性 


口 P 只 并 
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下 列 选项 中 不 是 audio 元 素 的 属性 。 

.error 属性 

.readyState 属性 

.autoplay 属性 

. poster 属性 

.当前 播放 文件 是 否 结束 的 属性 是 

error 

ended 

. paused 

loop 

.多 媒体 元 素 开始 播放 的 事件 是 

. CurrentTime 

startTime 

. played 

loop 

.Video 元 素 的 canplay 事件 的 含义 是 

. 浏览 器 开始 请 求 媒体 时 触发 

.浏览 器 正在 获取 媒体 数据 时 触发 

.浏览 器 可 以 开始 媒体 播放 ， 但 以 当前 速率 播放 不 能 直接 将 媒体 播放 完 时 触发 
.媒体 数据 即将 开始 播放 时 触发 

， play 事件 和 playing 事件 的 区 别 是 

. 没有 任何 区 别 ， 可 以 相互 使 用 
.视频 循环 或 再 次 播放 开始 时 ， 会 触发 play 事件 和 playing 事件 

.视频 循环 或 再 次 播放 开始 时 ， 将 不 会 触发 play 事件 ， 但 是 会 触发 playing 事件 
. 视频 循环 或 再 次 播放 开始 时 ， 将 不 会 触发 playing 事件 ， 但 是 会 触发 play 事件 


< 发 上 机 练习 : 实现 音频 播放 器 


本 次 上 机 练习 要 求 读者 根据 本 章 所 介绍 的 audio 元 素 的 内 容 , 再 结合 4.4 节 的 视频 播放 器 ， 
制作 一 个 音频 播放 器 ， 主 要 功能 包括 播放 、 暂 停 、 音 量 增 减 、 显 示 播 放 时 间 和 总 时 间 。 
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在 HTML5 以 前 ， 前 端 开 发 者 无 法 在 HTML 页 面 上 动态 地 绘制 图 片 。 如 果 需 要 在 HTML 页 
面 上 动态 地 生成 图 片 ， 要 么 是 在 服务 器 端 生成 位 图 后 输出 到 HTML 页 面 上 显示 ， 要 么 需要 借 
助 像 Flash 这 样 的 第 三 方 工 具 。HTML5 的 出 现 改 变 了 这 种 局 面 , HTML5 新 增 了 一 个 canvas 元 
素 ， 使 用 该 元 素 可 以 获取 一 个 CanvasRenderingContext2D 对 象 ， 该 对 象 具有 功能 强大 的 绘 
APl。 

本 章 会 详细 介绍 使 用 canvas 元 素 对 图 形 的 各 种 绘制 , 如 绘制 三 角形 、 文本 、 渐变 和 阴影 等 ， 
还 将 介绍 操作 图 形 的 各 种 方法 ， 如 平移 、 缩 放 和 坐标 转换 等 操作 。 
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9)) 5.1 认识 canvas 元 素 


canvas 是 HIMLS 新 增 的 一 个 绘图 元 素 。canvas 元 素 就 像 一 块 画 布 ， 在 画布 上 可 以 绘制 
文字 、 图 形 、 图 像 和 动画 等 。 下 面 详 细 介绍 canvas 元 素 。 


叫 )》 5.1.1 canvas 简介 


canvas 的 概念 最 初 由 苹果 公司 提出 ， 用 于 在 Mac OS X WebKit 中 创建 控制 面板 组 件 
(dashboard widget) 。 在 canvas 出 现 之 前 ，Web 开发 者 如 果 要 在 浏览 器 中 使 用 绘图 API， 只 
能 使 用 Flash 和 SVG (Scalable Vector Graphics， 可 伸缩 矢量 图 形 ) 插件 ， 或 者 只 有 正 才 支 
持 的 VML (Vector Markup Language， 矢 量 标记 语言 )， 以 及 其 他 一 些 稀奇 古怪 的 JavaScript 
技巧 。 
假设 Web 开发 要 在 没有 canvas 的 条 件 下 绘制 一 条 对 角 线 ， 这 听 起 来 非常 简单 ， 但 实际 
上 如 果 没 有 一 套 二 维 绘图 API, 这 将 会 是 一 项 相当 复杂 的 工作 。 而 canvas 能 够 提供 这 样 的 功能 ， 
对 浏览 器 端 来 说 此 功能 非常 有 用 ， 因 此 canvas 被 纳入 了 HIMLS 规范 。 目 前 主流 的 浏览 器 (如 
Google、Firefox、Opera 和 Safari 等 ) 都 提供 了 对 canvas 的 支持 。 


串 ) 5.1.2 创建 canvas 元 素 


canvas 元 素 只 是 一 个 图 形 的 容器 ， 它 本 身 不 具有 任何 行为 ， 但 是 它 能 把 绘图 API 展现 给 
客户 端 脚本 。 开 发 者 再 用 脚本 调用 绘图 API 把 想 绘制 的 东西 都 绘制 到 画布 (canvas 元 素 ) 上 。 
canvas 元 素 的 创建 非常 简单 ， 示 例 代码 如 下 : 


<canvas></canvas> 


默认 情况 下 ，canvas 元 素 创建 的 画布 宽度 为 300 像素 ， 高 度 为 150 像素 。 也 可 以 像 标 准 
HTML 元 素 那样 设计 canvas 元 素 的 大 小 和 其 他 属性 ， 示 例 代码 如 下 : 


<canvas width=200 height=200 id="djx" style="border:1px solid red;"> </canvas> 


- 信 注 意 - 一 一 一 一 一 一 一 一 一 Se 


| 尽管 canvas 元 素 的 功能 非常 强大 , 但 是 要 避免 canvas 元 素 的 过 度 使 用 。 例 如, 要 显示 一 个 标题 ， 

| 车 使 用 标题 样式 元 素 ( 例 如 hl、h2 和 了 3 等 ) 能 实现 ， 就 不 应 该 再 使 用 canvas 元 素 。 j 
创建 canvas 元 素 后 ， 开 始 绘图 前 需要 先 得 到 一 个 上 下 文 对象 Context。 上 下 文 对 象 可 以 

让 各 种 不 同 的 图 形 设备 具有 统一 的 接口 ， 这 样 开 发 人 员 只 需要 关注 绘图 ， 其 他 的 工作 都 交 给 

操作 系统 和 浏览 器 。 
每 个 canvas 元 素 都 有 一 个 对 应 的 Context 对 象 ， 并 且 该 对 象 是 唯一 的 。canvas 的 绘图 

API 定义 在 Context 对 象 上 ， 因 此 绘图 才 需要 先 获取 这 个 Context 对 象 。 具 体 代 码 如 下 : 
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var canvas = document.getElementByld("myCanvas"); 
if(canvas.getContext){ 

var ctx = canvas.getContext("2d"); 
} 
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在 上 述 代码 中 ，getContext() 方法 指定 一 个 参数 24， 表 示 该 canvas 对 象 用 于 生成 2D 图 案 ， 
即 平面 图 案 。 如 果 是 参数 34， 就 表示 用 于 生成 3D 图 像 〈 即 立体 图 案 ) 。 这 部 分 实际 上 单独 叫 
作 WebGLAPI (本 章 不 涉及 )。 


叫 )》 5.1.3 ”实践 案例 : 判断 浏览 器 是 否 支持 canvas 元 素 


目前 ， 许 多 主流 的 浏览 器 都 提供 了 对 canvas 元 素 的 支持 ， 用 户 可 以 在 测试 网 站 上 查看 浏 
览 器 对 该 元 素 的 支持 情况 ， 如 图 5-1 所 示 。 
| 


J OHMStest - How wel < x \E 也 
€ CDhtmlstestcom 六 三 
Md -=v gp ens 
匡 inpat type=ranee Yes ~ 
aa ves eHEN IS 21/25 25 
input type=checkbon Yes ~ 一 人 
Canvas 2D graphics Yes v 
PP input typerinegs Yes v 三 
Dirget tye-file Yes | Drawing primitives 
» 二 Text support Yes v a 
四 Path support No x 十 
Yes 、 Ellipse support Yes v (@) 
| Yes ~ Dashed line support Yes v 0 
keyeen Yes ~ Features CI 
上 atput Yes ~ Hit testing support No x < 
progress Yes ~ Blending modes Yes v 中 
bp ote Yes ~ CC 
Image export formats VY 
Fields PNG support Yes v < 
» Field validation ve v 国 .pec suppon 和 PY 
Association of controls and forms Yes ~ JPEG-XR support No x (7) 
» Other attributes Yes 、 WebP support Wi 口 
， CSS selectors Yes ~ 一 
机 四 30 6raphics 20/25 5 
Forms ~ 
PE ves w 国 WebGL 3D graphics Yes v 
WebGL 2 3D graphics No x 


图 5-1 Chrome 对 canvas 的 支持 
在 使 用 canvas 元 素 之 前 ， 也 可 以 通过 代码 判断 当前 使 用 的 浏览 器 是 否 支持 该 元 素 。 一 般 
情况 下 有 3 种 方法 进行 判断 ， 下 面 详细 介绍 。 
伍 向 canvas 元 素 的 开始 和 结束 标记 添加 内 容 
canvas 元 素 与 audio 和 video 等 元 素 一 样 ， 可 以 直接 在 该 元 素 的 开始 标记 和 结束 标记 之 间 
添加 代码 ， 如 果 浏 览 器 不 支持 该 元 素 ， 则 会 显示 标记 之 间 的 内 容 。 代 码 如 下 : 


<canvas> 


当前 浏览 器 不 支持 canvas 元 票 。 


</canvas> 


四 下调 用 getcontext0 方法 判断 
可 以 在 脚本 中 调用 getContext0 方法 来 判断 浏览 器 是 否 支持 canvas 元 素 ， 代 码 如 下 : 
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var canvas = document.getElementByld("myCanvas"); 
if (canvas.getContext){ 
alert(" 您 的 浏览 器 不 支持 canvas 元 系 "); 
}else{ 
alert(" 您 的 浏览 器 支持 canvas 元 票 "); 
} 


傅 使 用 try-catch 语句 判断 


志 在 脚本 中 使 用 try-catch 语句 也 可 以 判断 浏览 器 对 canvas 元 素 的 支持 情况 。 在 try 语句 块 
中 直接 获取 上 下 文 对 象 ， 获 取 过 程 中 出 现 异常 时 就 抛 出 。 代 码 如 下 : 


try{ 
document.createElement("myCanvas").getContext("2d"); 
document.getElementByld("support").innerHTML = " 您 的 浏览 器 支持 canvas 元 材 "; 
} catch (e) { 
document.getElementByld('support").innerHTML = " 您 的 浏览 器 不 支持 canvas 元 票 "; 
} 


7 5.2 ”绘制 简单 图 形 


在 了 解 如 何 判断 浏览 器 是 否 支 持 canvas 元 素 之 后 ， 本 节 将 介绍 一 些 简单 图 形 的 绘制 方法 ， 
包括 绘制 直线 、 和 矩形 、 圆 形 和 三 角形 等 。 

canvas 画布 提供 了 一 个 用 来 作 图 的 平面 空间 ， 该 空间 的 每 个 点 都 有 自己 的 坐标 ，x 表示 横 
坐标 ，y 表示 纵 坐 标 。 原 点 〈0.0) 位 于 图 像 左上 角 ，x 轴 的 正 向 是 从 原点 向 右 ，y 轴 的 正 向 是 
从 原点 向 下 。 无 论 是 绘制 图 形 还 是 文本 ， 如 果 不 指定 坐标 ,默认 将 从 坐标 原点 (0,0) 开 始 绘制 。 


叫 )》5.2.1 绘制 矩形 


在 HIML5 中 实现 绘制 矩形 的 效果 需要 调用 上 下 文 对 象 的 3 个 函数 : filllRect0、 
strokeRect() 和 clearRect()。 这 些 函 数 的 语法 形式 如 下 : 


2 
一 
三 
捕 
a 
+ 
O 
WU) 
0 
W 
中 
Cc 
中 
< 
YD 
0 
0 
二 
Ea 
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context.fillRect(x,y,width,height); // 绘制 矩形 ， 以 当前 的 fillstyle 来 填充 
context.strokeRect(x,y,width,height); // 绘制 矩形 ， 以 当前 的 strokestyle 来 填充 
context.clearRect(x,y,width,height); // 清除 指定 区 域 的 像 票 


上 述 语法 中 每 个 函数 都 包含 4 个 相同 的 参数 ， 第 一 个 参数 表示 和 矩形 起 点 的 横 坐 标 ， 第 二 
个 参数 表示 和 矩形 起 点 的 纵 坐 标 ， 第 三 个 参数 表示 和 矩形 的 宽度 ， 第 四 个 参数 表示 和 矩 形 的 高 度 。 
坐标 原点 为 canvas 画布 的 左上 角 ， 即 左上 角 的 坐标 为 《0,0)。 

绘制 矩形 时 需要 结合 两 个 常用 的 属性 : fllStyle 和 strokeStyle。fillStyle 表示 填充 的 样式 ， 
在 该 属性 中 可 以 设置 填充 的 颜色 值 ; strokeStyle 表示 图 形 边框 的 样式 ， 在 该 属性 中 可 以 设置 边 
框 的 颜色 值 。 另 外 这 两 个 属性 除了 可 以 是 CSS 颜色 外 , 还 可 以 是 一 个 图 案 或 者 一 种 颜色 渐变 。 
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【 例 5-1]】 
使 用 上 面 介 绍 的 函数 在 canvas 画布 中 绘制 4 个 和 矩形 ， 主 要 实现 步骤 如 下 。 
四 创建 一 个 HIMLS 页 面 ， 在 页 面 的 合适 位 置 添加 4 个 canvas 元 素 ， 分 别 用 来 绘制 不 
同 长 度 和 宽度 的 和 矩形 。 页 面 的 具体 代码 如 下 : 


<canvas id="canvas1" height=250 width=200></canvas> 
<canvas id="canvas2" height=250 width=200></canvas> 
<canvas id="canvas3" height=250 width=200></canvas> 
<canvas id="canvas4" height=250 width=200></canvas> 


在 上 述 代码 中 ， 每 个 canvas 元 素 都 定义 了 id 属性 以 方便 在 代码 中 进行 引用 ， 同 时 也 定义 
了 画布 的 宽度 和 高 度 。 
四 及 编写 代码 ， 在 id 为 canvasl 的 画布 上 绘制 一 个 矩形 ， 要 求 边框 宽度 为 10 像素 、 边 框 
色 为 白色 。JavaScript 实现 代码 如 下 : 


泗 


<script language="javascript" type="text/javascript"> 
function AddJuxing1() 
{ 

var canvas = document.getElementByld("canvas1"); 


if(canvas && canvas.getContext) 


{ 
var context = canvas.getContext("2d"); 
context.strokeStyle="#FFFFFF"; // 指定 边框 的 颜色 为 白色 
context.lineWidth = 10; // 指定 边框 的 宽度 为 10 
context.strokeRect(5,5,190,190); // 绘制 矩形 边框 
} 
} 
</script> 


如 上 述 代 码 所 示 ，strokeRect() 函数 指定 矩形 起 点 的 横 坐 标 和 纵 坐标 都 是 5， 宽度 和 高 度 
都 为 190 像素 ， 因 此 最 终 的 图 形 效果 是 一 个 正方 形 。 

大 中 编写 代码 ， 在 id 为 canvas2 的 画布 上 绘制 一 个 和 矩形， 要 求 不 带 边 框 ， 用 黄色 作为 背 
景 填充 。JavaScript 实现 代码 如 下 : 


function AddjJuxing2() 
1 


var canvas = document.getElementByld("canvas2"); 


if(canvas && canvas.getContext) 


{ 
Var context = canvas.getContext("2d"); 
context.fillSstyle="yellow”; // 指定 填充 的 颜色 为 黄色 
context.fillRect(10,50,200,100); // 填充 矩形 

} 
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如 上 述 代码 所 示 ，filRectO) 函数 指定 矩形 起 点 的 横 坐标 是 10， 纵 坐标 是 50， 宽 度 为 200 
像素 ， 高 度 为 100 像素 。 由 于 没有 调用 strokeRect0 函数 ， 因 此 最 终 的 图 形 是 一 个 没有 边框 的 
和 矩形 。 

大多 编写 代码 ， 在 id 为 canvas3 的 画布 上 绘制 一 个 矩形， 要 求 既 带 边框 又 有 填充 效果 。 
JavaScript 实现 代码 如 下 : 


function AddJuxing3() 

1 
var canvas = document.getElementByld("canvas3"); 
if(canvas && canvas.getContext) 


Var context = canvas.getContext("2d"); 
context.fillstyle="green"; // 指定 填充 的 颜色 为 绿色 
context.strokeStyle="blue"; // 指定 边框 的 颜色 为 蓝 色 
context.lineWidth = 2; // 指定 边框 的 宽度 为 2 
context.fillRect(5,30,180,180); // 填充 矩形 
context.strokeRect(5,30,180,180); // 绘制 矩形 边框 

} 


} 


如 上 述 代码 所 示 , fillStyle 属性 指定 填充 颜色 为 绿色 ,strokeStyle 属性 指定 边框 颜色 为 蓝 色 ， 
fillRect() 函数 对 矩形 进行 了 填充 ，strokeRectO) 函数 绘制 了 矩形 的 边框 。 另 外 ，filRectO 函数 
和 strokeRect() 函数 使 用 了 相同 的 坐标 和 和 矩形 尺寸 ， 因 此 最 终 的 图 形 是 一 个 带 边框 和 填充 的 正 
方形 。 

加 号 编写 代码 ， 在 id 为 canvas4 的 画布 上 绘制 一 个 矩形 ， 要 求 使 用 CSS 的 方式 指定 边框 
和 填充 颜色 。JavaScript 实现 代码 如 下 : 
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function AddJuxing4() 

1 
var canvas = document.getElementByld("canvas4"); 
if(canvas && canvas.getContext) 


{{ 
var context = canvas.getContext("2d"); 
context.fillStyle="#FFOOOO"; // 指定 填充 的 颜色 为 红色 
context.strokeStyle="#FFFFFF"; // 指定 边框 的 颜色 为 白色 
context.lineWidth = 3; // 指定 边框 的 宽度 为 3 
context.fillRect(40,40,80,180); // 填充 矩形 
context.strokeRect(30,30,100,200); // 绘制 外 部 矩形 


} 


如 上 述 代码 所 示 ，fillStyle 属性 指定 填充 颜色 为 本 F0000 (红色 )，strokeStyle 属性 指定 
边框 颜色 为 本 FFFFF (白色 ) 。 另 外 ， 由 于 fllRect() 函数 指定 的 填充 区 域 比 strokeRect() 函数 
指定 的 边框 区 域 小 ， 因 此 最 终 会 看 到 两 个 矩形 之 间 有 间隙 。 
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D6) 监听 页 面 的 load 事件 ， 在 页 面 加 载 完 成 后 调用 上 面 的 4 个 函数 。 代 码 如 下 : 


window.addEventListener("load",AddJuxing1,true); 
window.addEventListener("load",Addjuxing2,true); 
window.addEventListener("load",AddjJuxing3,true); 
window.addEventListener("load",AddjJuxing4,true); 


加 矶 保存 上 述 步 又 对 页 面 的 修改 。 在 支持 canvas 元 素 的 浏览 器 中 打开 页 面 ， 最 终 运行 效 


果 如 图 5-2 所 示 。 


六 HTML 5 给 图 


< C file:///D:/HtmlSpace/code5/1/index.html 


认识 矩 形 和 正方 形 


加 


图 5-2 绘制 矩形 的 运行 效果 
本 示例 用 到 了 fillStyle 属性 和 strokeStyle 属性 ， 这 两 个 属性 在 后 面 会 经 常 使 用 。fillStyle 


属性 用 于 设置 或 返回 填充 时 的 颜色 、 渐 变 或 模式 ， 属 性 的 默认 值 是 #000000。 基 本 语法 如 下 : 
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context.fillStyle=color | gradient | pattern; 


从 上 述 代 码 可 以 看 出 ，fillStyle 属性 的 值 可 以 有 color、gradient 和 pattern 三 种 。 
e@ color 指定 绘图 填充 色 的 CSS 颜色 值 ， 默 认 值 是 #000000。 其 值 可 以 是 十 六 进 制 颜色 ， 
也 可 以 是 颜色 合法 的 英文 名 称 。 
e gradient 用 于 填充 绘图 的 渐变 对 象 ( 线性 或 者 径 向 ) 。 
e@ pattern 用 于 填充 绘图 的 pattern 对 象 。 
strokeStyle 属性 用 于 设置 或 返回 绘制 时 画笔 的 颜色 、 渐 变 或 者 模式 ， 其 属性 默认 值 是 
#000000。 该 属性 的 取 值 与 fllStyle 属性 相同 ， 就 不 再 详 述 。 


必 ) 5.2.2 绘制 直线 


除了 和 矩形 之 外 ， 想 要 绘制 其 他 图 形 则 需要 使 用 路 径 。 同 绘制 矩 形 一 样 ， 绘 制 其 他 图 形 时 
也 需要 获取 图 形 上 下 文 对 象 。 使 用 路 径 绘 制图 形 时 经 常会 用 到 以 下 函数 。 

e beginPath() 开始 创建 路 径 。 

e@ moveTo(x,y) 不 绘制 ， 只 是 将 当前 位 置 移动 到 新 的 目标 坐标 ， 并 作为 线条 开始 点 。 

e lineTo(x,y) 绘制 线条 到 指定 的 目标 坐标 ( x.y )， 且 在 两 个 坐标 之 间 男 一 条 直线 。 

@ stroke() 绘制 图 形 的 边框 。 
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e@ fill() 填充 实心 图 形 ， 当 调用 该 方法 时 开放 的 路 径 会 自动 闭合 ， 而 无 须 调用 closePath() 
函数 。 

@ closePath() 关闭 路 径 。 

使 用 上 面 函 数 绘制 图 形 的 步骤 通常 是 先 用 路 径 勾 勒 图 形 轮 廓 ， 然 后 设置 颜色 进行 绘制 ， 
具体 步骤 如 下 。 

加 三 调用 beginPath() 函数 创建 路 径 。 

大 允 创建 图 形 的 其 他 路 径 。 

天台 调用 closePath() 函数 关闭 路 径 ， 这 一 步 不 是 必需 的 。 

大 胃 设 定 绘制 样式 ， 然 后 调用 stroke0 或 fll0 函数 绘制 路 径 。 

【 例 5-2】 

下 面 通过 一 个 示例 演示 如 何 使 用 上 面 的 函数 绘制 直线 。 因 两 点 确定 一 条 直线 ， 要 在 网 页 
中 绘制 一 条 直线 就 需要 确定 直线 的 起 点 坐标 和 终点 坐标 。 本 案例 使 用 路 径 的 相关 函数 实现 绘 
制 不 同 直线 的 功能 ， 主 要 步骤 如 下 。 

加 中 创建 一 个 HIMLS 页 面 ， 在 页 面 的 合适 位 置 添加 3 个 canvas 元 素 ， 分 别 用 来 绘制 不 
同 的 图 形 。 页 面 的 具体 代码 如 下 : 


<canvas id="canvas1" height=250 width=200></canvas> 
<canvas id="canvas2" height=250 width=200></canvas> 
<canvas id="canvas3" height=250 width=200></canvas> 


加 罗 编写 代码 ， 在 id 为 canvasl 的 画布 上 绘制 一 条 直线 ， 要 求 边框 宽度 为 5 像素 ， 边 框 
颜色 为 白色 。JavaScript 实现 代码 如 下 : 


function GetContext(id) 
{ 


var canvas = document.getElementByld(id); 
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if(canvas && canvas.getContext) 


{ 
var context = canvas.getContext("2d"); 
return context; 
} 
} 
function Add1() 
{ 
var context = GetContext("canvas1"); 
context.beginPath(); 
context.lineWidth=5; // 设置 绘制 直线 的 宽度 为 5 
context.strokeStyle="#FFFFFF"; // 指定 边框 的 颜色 为 #FFFFFF (白色 ) 
context.moveTo(20,100); // 起 始 坐标 点 
context.lineTo(150,100); 1/ 终点 坐标 
context.stroke(); // 调用 stroke() 函数 绘制 直线 
} 
</script> 
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如 上 述 代码 所 示 ， 设 置 好 直线 的 边框 颜色 和 边框 宽度 之 后 ，moveTo() 函数 将 画笔 移动 到 


起 点 坐标 〈20,100) 处 ， 然 后 开始 向 终点 坐标 〈150，100) 进行 绘制 。 


大 开 编写 代码 ， 在 id 为 canvas2 的 画布 上 绘制 两 条 直线 ， 要 求 边框 宽度 均 为 2 像素 ， 边 


框 颜色 均 为 白色 。JavaScript 实现 代码 如 下 : 


function Add2() 
{ 
var context = GetContext("canvas2"); 
context.beginPath(); 
context.lineWidth=2; // 设置 绘制 直线 的 宽度 为 2 
context.strokeStyle="#FFFFFF"; // 指定 边框 的 颜色 为 #FFFFFF (白色 ) 
context.moveTo(160,50); /1/ 起 始 坐 标点 
context.lineTo(50,100); // 目标 坐标 
context.lineTo(160,185); 1/ 目标 坐标 
context.stroke(); // 调用 stroke() 函数 绘制 图 形 
} 
如 上 述 代码 所 示 ， 两 条 直线 使 用 相同 的 起 点 ， 终 点 分 别 在 两 个 lneTo0 函数 中 指定 。 
大 验 编写 代码 ， 在 id 为 canvas3 的 画布 上 绘制 两 条 直线 ， 要 求 边框 宽度 均 为 3 像素 ， 边 


框 颜色 均 为 白色 。JavaScript 实现 代码 如 下 : 


function Add3() 

{ 
var context = GetContext("canvas3"); 
context.beginPath(); 
context.lineWidth=3; // 设置 绘制 直线 的 宽度 为 3 
context.strokeStyle="#FFFFFF"; // 指定 边框 的 颜色 为 #FFFFFF (白色 )》 
context.fillstyle="#FF0000"; // 指定 填充 的 颜色 为 首 F0000 (红色 》 
context.moveTo(160,50); // 起 始 坐 标点 
context.lineTo(50,100); // 目标 坐标 
context.lineTo(160,185); // 目标 坐标 
context.fill(); // 调用 fll() 函数 绘制 图 形 
context.stroke(); // 调用 stroke() 函数 绘制 图 形 

} 


上 述 代 码 ， 比 第 3 步 多 了 两 行 ， 这 两 行 的 作用 是 为 图 形 指定 背景 为 杆 F0000 (红色)， 再 


使 用 该 颜色 进行 填充 。 


加 旺 监听 页 面 的 load 事件 ， 在 页 面 加 载 完成 后 调用 上 面 的 3 个 函数 。 代 码 如 下 : 


window.addEventListener("load",Addzhil,true); 
window.addEventListener("load",Addzhi2,true); 
window.addEventListener("load",Addzhi3,true); 


果 如 图 5-3 所 示 。 


轩 保存 上 述 步 又 对 页 面 的 修改 。 在 支持 canvas 元 素 的 浏览 器 中 打开 页 面 ， 最 终 运行 效 
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图 5-3 绘制 直线 的 运行 效果 


叫 )》 5.2.3 绘制 圆 形 
绘制 圆 形 需要 调用 arc() 函数 ， 该 函数 的 语法 形式 如 下 : 


context.arc(x,y,radius,startAngle,endAngle,anticlockwise); 


上 述 代 码 中 的 arc0 函数 包含 6 个 参数 ，x 和 y 分 别 表示 绘制 圆 形 的 起 点 横 坐 标 和 起 点 
纵 坐 标 ，radius 表示 绘制 的 圆 形 半径 ，startAngle 表示 开始 角度 ，endAngle 表示 结束 角度 ， 
anticlockwise 表示 是 否 按照 顺 时 针 方 向 进行 绘制 。 

在 canvas 元 素 的 API 中 绘制 半径 与 弧 时 所 指定 的 参数 为 开始 弧度 与 结束 弧度 ， 如 果 习 惯 
使 用 角度 ， 可 以 使 用 下 面 的 方法 将 弧度 转换 为 角度 。 


var radians = degress*Math.Pl*180; 


上 述 方法 中 Math.PI 表示 角度 为 180 度 ，Math.PI*2 表示 角度 为 360 度 。 


和 


| are0 函数 不 仅 可 以 用 来 绘制 图 形 , 也 可 以 用 来 绘制 国 缴 。 使 用 时 必须 指定 开始 角度 与 结束 角度 ，| 
这 两 个 参数 决定 了 弧度 。anticlockwise 为 一 个 布尔 值 ， 当 参数 值 为 true 时 表示 按照 顺 时 针 方向 绘制 ， | 
| 否则 为 过 时 针 方向 绘制 。 | 
【 例 5-3】 
下 面 演示 使 用 arc0) 函数 在 canvas 画布 中 绘制 圆 形 和 弧 形 的 方法 ， 主 要 实现 步骤 如 下 。 
面 友 创建 一 个 HTMLS5 页 面 ， 在 页 面 的 合适 位 置 添加 4 个 canvas 元 素 ， 分 别 用 来 绘制 不 
同 的 图 形 。 页 面 的 具体 代码 如 下 : 


洛 


<canvas id="canvas1" height=250 width=200></canvas> 
<canvas id="canvas2" height=250 width=200></canvas> 
<canvas id="canvas3" height=250 width=200></canvas> 


<canvas id="canvas4" height=250 width=200></canvas> 


如 编写 代码 ， 在 id 为 canvasl 的 画布 上 绘制 一 个 弧 形 ， 要 求 边框 宽度 为 3 像素 ， 边 框 


色 为 白色 。JavaScript 实现 代码 如 下 : 


形 的 


<script language="javascript" type="text/javascript"> 
function GetContext(id) 
{ 

var canvas = document.getElementByld(id); 


if(canvas && canvas.getContext) 


{ 
Var context = canvas.getContext("2d"); 
return context; 
} 
} 
function Add1() 
{ 
var context = GetContext("canvas1"); 
context.beginPath(); // 准备 绘制 
context.strokeStyle="#FFFFFF"; // 指定 边框 颜色 为 #FFFFFF (和 白色) 
context.lineWidth = 3; // 指定 边框 的 宽度 为 3 
context.arc(80,80,60,Math.Pl,Math.Pl*2,true); // 开始 绘制 
context.stroke(); // 设置 边框 样式 
} 
</script> 


如 上 述 代码 所 示 ， 在 设置 好 边框 颜色 和 宽度 之 后 ， 调 用 arc() 函数 开始 绘制 弧 形 ， 其 中 弧 
圆心 坐标 为 《80.80)， 弧 形 的 半径 为 60， 弧 形 的 角度 为 180 度 ; stroke() 函数 用 于 在 弧 形 


上 应 


指定 的 边框 样式 和 颜色 。 
加 9 编写 代码 , 在 id 为 canvas2 的 画布 上 绘制 一 个 弧 形 , 要 求 填充 颜色 为 村 FFFFF( 白 色 )。 


JavaScript 实现 代码 如 下 : 


function Add2() 
var context = GetContext("canvas2"); 
context.beginPath(); 
context.fillStyle="#FFFFFF"; // 指定 填充 颜色 为 #FFFFFF (白色 ) 
context.arc(80,80,60,0,(Math.Pl*2/4),true); // 绘制 弧 形 
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context.fill(); 


} 


如 上 述 代 码 所 示 ， 在 调用 arc0 函数 绘制 前 设置 了 填充 颜色 ， 在 该 函数 调用 后 fill( 函数 
使 用 设置 好 的 颜色 对 绘制 的 弧 形 进行 填充 。 

国难 编写 代码 , 在 id 为 canvas3 的 画布 上 绘制 一 个 弧 形 , 要 求 填充 颜色 为 枉 FFFFF( 白 色 )。 
JavaScript 实现 代码 如 下 : 


function Add3() 
1 
var context = GetContext("canvas3"); 
context.beginPath(); 
context,fillStyle="#FFFFFF"; // 指定 填充 颜色 为 #FFFFFF (白色 》 
context.arc(80,80,60,Math.Pl,(Math.Pl*2/4)*3,false); // 绘制 弧 形 
context.fill(); 


让 


这 一 步 绘制 的 弧 形 除了 角度 与 第 2 步 不 同 外 ， 其 他 设置 都 相同 。 
网 编写 代码 , 在 id 为 canvas4 的 画布 上 绘制 一 个 圆 形 , 要 求 填充 颜色 为 # 丁 F0000( 红 色 )， 
边框 颜色 为 十 F0000 (白色 )， 边 框 宽度 为 10。JavaScript 实现 代码 如 下 : 


function Add4() 
{ 


var context = GetContext("canvas4"); 
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context.beginPath(); 

context ,fillStyle="#FF0000"，; // 指定 填充 的 颜色 为 #FF0000 (红色 》 
context.strokeStyle="#FFFFFF"; // 指定 边框 的 颜色 为 #FFFFFF (白色 》 
context.lineWidth = 10; // 指定 边框 的 宽度 为 10 
context.arc(80,80,60,0,Math.Pl*2,false); // 绘制 圆 形 

context.stroke(); // 绘制 圆 形 边框 

context.fill(); // 填充 圆 形 
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[@B)》 监听 页 面 的 load 事件 ， 在 页 面 加 载 完成 后 调用 上 面 的 4 个 函数 。 代 码 如 下 : 


window.addEventListener("load",Add1,true); 
window.addEventListener("load",Add2,true); 
window.addEventListener("load",Add3,true); 


window.addEventListener("load",Add4,true); 


攻克 保存 上 述 步 又 对 页 面 的 修改 。 在 支持 canvas 元 素 的 浏览 器 中 打开 页 面 ， 最 终 运 行 效 
果 如 图 5-4 所 示 。 
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图 5-4 绘制 圆 形 的 运行 效果 


咱 》5.2.4 “实践 案例 : 绘制 三 角形 

至 此 ， 我 们 已 经 学 会 了 在 画布 上 绘制 矩形 、 直 线 、 圆 形 和 弧 形 。 本 节 将 通过 案例 演示 如 
何 使 用 绘制 直线 的 方法 来 绘制 不 同 的 三 角形 ， 包 括 普 通 三 角形 、 等 腰 直角 三 角形 、 等 腰 三 角 
形 和 等 边 三 角形 ， 最 终 运 行 效果 如 图 5-5 所 示 。 
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图 5-5 绘制 不 同 的 三 角形 


主要 实现 步骤 如 下 。 
WD 创建 一 个 HIML5 页 面 ， 在 页 面 的 合适 位 置 添加 4 个 canvas 元 素 ， 分 别 用 来 绘制 不 
同 的 图 形 。 页 面 的 具体 代码 如 下 : 


<canvas id="canvas1" height=250 width=200></canvas> 
<canvas id="canvas2" height=250 width=200></canvas> 
<canvas id="canvas3" height=250 width=200></canvas> 


<canvas id="canvas4" height=250 width=200></canvas> 
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6 编写 代码 ， 在 这 为 canvasl 的 画布 上 绘制 一 个 普通 三 角形 ， 并 用 白色 进行 填充 。 
JavaScript 实现 代码 如 下 : 


<script language="javascript" type="text/javascript"> 


function Add1() 

{ 
var context = GetContext("canvas1"); 
context.beginPath(); // 开始 创建 路 径 
context.fillStyle="#FFFFFF"; // 设置 填充 颜色 为 白色 
context.moveTo(100,10); // 起 始 坐标 点 
context.lineTo(25,200); // 目标 路 径 
context.lineTo(200,150); // 目标 路 径 
context.fill() // 绘制 普通 三 角形 

} 

</script> 


0B 编写 代码 ， 在 id 为 canvas2 的 画布 上 绘制 一 个 等 腰 直 角 三 角形 ， 并 用 白色 进行 填充 。 
JavaScript 实现 代码 如 下 : 
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function Add2() 
{ 
var context = GetContext("canvas2"); 
context,beginPath(); // 开始 创建 路 径 
context.fillStyle="#FFFFFF"; 
context.moveTo(155,155); // 起 始 坐 标点 
context.lineTo(155,25); // 目标 路 径 
context.lineTo(40,155); // 目标 路 径 
context.fill(); // 绘制 等 腰 直 角 三 角形 
} 


而 各 编写 代码 ， 在 id 为 canvas3 的 画布 上 绘制 一 个 等 腰 三 角形 ， 并 用 白色 进行 填充 。 
JavaScript 实现 代码 如 下 : 


function Add3() 
{ 
var context = GetContext("canvas3"); 
context.beginPath(); // 开始 创建 路 径 
context.fillStyle="#FFFFFF"; 
context.moveTo(100,20); // 起 始 坐标 点 
context.lineTo(170,200); // 目标 路 径 
context.lineTo(30,200); // 目标 路 径 
context.fill(); // 绘制 等 腰 三 角形 
上 
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大 号 编写 代码 ， 在 id 为 canvas4 的 画布 上 绘制 一 个 等 边 三 角形 ， 使 用 白色 边框 ， 并 用 红 


色 进 行 填充 。JavaScript 实现 代码 如 下 : 


function Add4() 

{ 
var context = GetContext("canvas4"); 
context.beginPath(); 
context.fillStyle="#FF0000"; 
context.strokeStyle="#FFFFFF"; 
context.lineWidth = 10; 
context.moveTo(100,30); 
context.lineTo(170,170); 
context.lineTo(30,170); 
context.closePath(); 
context.stroke(); 
context.fill(); 
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// 指定 填充 的 颜色 为 #FF0000 
// 指定 边框 的 颜色 为 #FFFFFF 
// 指定 边框 的 宽度 为 10 

// 起 始 坐标 点 

// 目标 路 径 

// 目标 路 径 

// 关闭 路 径 

// 绘制 边框 

// 填充 内 容 


了 6 监听 页 面 的 load 事件， 在 页 面 加 载 完 成 后 调用 上 面 的 4 个 函数 。 


叫 ) 5.2.5 保存 和 恢复 图 形 


把 图 形 绘制 到 画布 上 之 后 可 以 把 当前 的 状态 保存 起 来 ， 然 后 在 需要 时 再 恢复 到 绘画 状态 


继续 绘制 。 绘 画 状态 是 指 画 布 上 的 坐标 原点 
值 等 内 容 。 


、 变 形 


时 的 变化 矩阵 以 及 上 下 文 对 象 的 当前 属性 


canvas API 中 提供 了 save( 函数 和 restore(O 函数 用 来 保存 和 恢复 绘画 状态 ， 这 两 个 函数 
都 没有 参数 。 首 先 调 用 save() 函数 将 当前 状态 保存 到 栈 中 ， 在 完成 设置 操作 后 再 调用 restore() 
函数 从 栈 中 取出 之 前 保存 的 图 形状 态 进行 恢复 ， 通 过 这 种 方法 可 以 对 之 后 绘制 的 图 像 取 消 裁 


剪 区 域 。 


保存 与 恢复 的 图 形状 态 会 应 用 到 以 下 区 域 。 
e 当前 应 用 的 变形 ， 即 移动 、 旋 转 和 缩放 等 。 


e 图 像 裁剪 。 


e@ 改变 图 形 上 下 文 的 属性 值 ， 包 括 strokeStyle、fillStyle、globalAlpha、lineWidth、lineCap、 


lineJoin、milterLimit、shadowOffsetX、shadowOffsetY 、shadowBlur、shadowColor、 


globalCompositeOperation 等 。 
【 例 5-4】 
下 面 创 建 一 个 示例 演示 在 画布 上 应 用 图 


canvas 元 素 ，id 分 别 是 canvasl 和 canvas2 。 


前 后 的 对 比 效 果 。 首 先 在 页 面 上 添加 两 个 


在 canvasl 上 使 用 fIRect(O 函数 绘制 几 个 不 同位 置 和 大 小 的 矩形 ， 代 码 如 下 : 


<script language="javascript" type="text/javascript"> 


var ctx = document.getElementByld('canvas1').getContext('2d"); 


ctx.fillStyle = "#FF97CB"; 
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ctx.fillRect(0,0,250,250); // 绘制 最 外 层 的 矩形 
ctx.fillStyle = 'blue'; // 设置 填充 颜色 
ctx.fillRect(15,15,220,220); // 绘制 一 个 内 部 矩形 
ctx.fillstyle = #FFFFFF' // 设置 填充 颜色 


ctx.fillRect(30,30,250,250); 

ctx.fillRect(45,45,230,230); 

ctx.fillRect(60,60,130,130); 
</script> 


上 述 代 码 没有 使 用 图 形状 态 ， 因 此 每 次 绘制 都 会 覆盖 该 区 域 上 的 图 形 。 在 上 面 代码 的 基 
础 上 添加 图 形状 态 的 保存 和 恢复 ， 并 在 canvas2 上 显示 , 最 终 代 码 如 下 : 


var ctx = document.getElementByld('canvas2').getContext('2d'); 
ctx.fillStyle = "#FF97CB"; 


ctx.fillRect(0,0,250,250); // 绘制 最 外 层 的 矩形 
ctx.save(); // 保存 默认 状态 
ctx.fillstyle = 'blue'; // 设置 填充 颜色 
ctx.fillRect(15,15,220,220); // 绘制 一 个 内 部 和 矩 形 
ctx.save(); // 保存 其 状态 

ctx fillStyle = '#FFFFFF' // 设置 填充 颜色 
ctx.fillRect(30,30,250,250); 

ctx.restore(); // 恢复 保存 状态 


ctx.fillRect(45,45,230,230); 
ctx.restore(); 
ctx.fillRect(60,60,130,130); 
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最 后 保存 对 页 面 的 修改 ， 在 浏览 器 中 查看 效果 ， 最 终 效果 如 图 5-6 所 示 。 


口 HTML 5 给 图 


€ (of file:///D:/HtmlSpace/code5/1/index4.html 


认识 绘图 状态 


[a | 


图 5-6 保存 和 恢复 状态 的 运行 效果 
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咱 ) 5.2.6 输出 图 形 


输出 图 形 就 是 把 当前 的 绘画 状态 输出 到 dataURL 地 址 所 指向 的 数据 。dataURL 是 目前 
大 多 数 浏 览 器 能 够 识别 的 一 种 base64 位 编码 的 URL， 主 要 用 于 小 型 的 可 以 在 网 页 中 直接 广 
入 而 不 需要 用 外 部 文件 说 入 的 数据 ， 如 img 元 素 中 的 图 像 文件 等 。dataURL 的 格式 类 似 于 
“data:image/png:;base64,1VBORwOKGgoAAAANSUhEUgAAAAoAAAAK…etc”， 目 前 大 多 数 
浏览 器 都 支持 该 特性 。 
canvas API 中 的 toDataURL() 函数 实现 了 图 像 输出 功能 。 该 函数 可 以 把 绘画 状态 输出 到 
dataURL 中 ， 具 体 语法 如 下 : 


canvas.toDataURL(type); 


上 述 语法 是 在 toDataURL() 函数 中 传递 一 个 参数 type， 该 参数 表示 要 输入 数据 的 MIME 
类 型 。 
【 例 5-5】 
假设 在 页 面 上 的 canvas 中 有 一 个 图 形 ， 现 在 要 实现 单 击 页 面 上 的 按钮 将 图 形 输出 到 img 
元 素 中 ， 实 现 步 骤 如 下 。 
园 友 创建 一 个 HIMLS 页 面 ， 在 页 面 的 合适 位 置 添加 canvas 元 素 、input 元 素 和 imsg 元 素 ， 
分 别 表示 绘制 的 图 形 、“ 输 出 图 形 ” 按 钮 及 显示 输出 的 图 形 。 页 面 的 具体 代码 如 下 : 


<h1> 输出 图 形 </h1> 

<canvas id="canvas1" width="400" height="230" style="border:#000 solid"></canvas> 
<input type="button" class="btn fl" value=" 输出 图 形 " onClick="javascript:Showlmg();" > 
<img id="img" width="150" height="150" /> 


加 及 编写 代码 ， 在 canvas 中 绘制 一 个 图 形 。 作 为 示例 ， 这 里 简单 地 绘制 3 个 圆 形 ， 代 
码 如 下 : 
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var ctx = document.getElementByld('canvas1').getContext('2d'); 
ctx.beginPath(); 


ctx.strokeStyle="#000000"; // 指定 边框 颜色 为 #FFFFF (白色 ) 
ctx.arc(200,80,60,0,Math.Pl*2,false); // 绘制 圆 形 
ctx.arc(200,100,100,0,Math.Pl#2,false); // 绘制 圆 形 
ctx.arc(200,100,40,0,Math.Pl*2,false); // 绘制 圆 形 

ctx.stroke(); // 绘制 圆 形 边框 


加 加 单 击 “ 输 出 图 形 ” 按 钮 会 调用 draw0 函数 ， 该 函数 将 canvas 元 素 绘制 的 图 形 输出 到 
img 元 素 中 。 代 码 如 下 : 


function Showlmg() 


{ 


// 绘制 canvas 上 的 图 形 数 据 


var img_data = document.getElementByld('canvas1').toDataURL("images/jpeg"); 


// 将 数据 输出 到 控制 台 


console.log(img_data); 
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// 将 数据 显示 到 img 元 票 
document.getElementByld("img").src=img_data; 


} 


大 中 运行 上 述 代 码 ， 单 击 “ 输 出 图 形 ” 按 钮 进行 测试 ， 页 面 的 最 终 效果 如 图 5-7 所 示 ， 
在 页 面 底部 的 控制 台面 板 中 会 看 到 当前 图 形 对 应 的 base64 编码 数据 。 


口 HTML 5 给 图 
所 es [ file:///D:/HtmlSpace/codeS/1/index5.html 


输出 图 形 


| 输出 图 形 | 
RD Elements Console Sources Network Timeline Profiles Resources Audits 


© TT topframe> Preserve log 
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图 5-7 输出 图 像 效 果 


0 5.3 ”绘制 文本 


除了 使 用 canvas 元 素 绘制 常见 的 图 形 之 外 ， 还 可 以 绘制 文字 ， 绘 制 时 可 以 指定 字体 大 小 、 
字体 样式 和 对 齐 方式 等 。 本 节 将 详细 介绍 有 关 绘 制 文 本 的 内 容 。 


川 ) 5.3.1 绘制 普通 文本 
绘制 文本 同样 是 调用 上 下 文 对 象 提供 的 属性 和 方法 ， 通 过 属性 可 以 设置 文本 的 字体 样式 
和 对 齐 方 式 等 信息 ， 常 用 的 3 个 属性 说 明 如 下 。 
e font 属性 设置 或 返回 文本 内 容 的 当前 字体 属性 。 
e textAlign 属性 ”设置 或 返回 文本 内 容 的 当前 对 齐 方式 ， 其 属性 值 可 以 是 start ( 默认 值 ) 、 
end、 right 和 center。 
e@ textBaseline 属性 ”设置 或 返回 在 绘制 文本 时 使 用 的 当前 文本 基线 ， 其 属性 值 可 以 是 
top、hanging、middle、alphabetic、ideographic ( 默认 值 ) 和 bottom。 
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与 绘制 文本 有 关 的 方法 有 3 个 ， 具 体 说 明 如 下 。 

e@ fillText() 方法 ”在 画布 上 绘制 “被 填充 的 ”文本 。 

e@ strokeText() 方法 ”在 画布 上 绘制 文本 ( 无 填充 ) 。 

e_ measureText() 方法 ”返回 包含 指定 文本 宽度 的 对 象 。 

fillText( 方法 在 画布 上 绘制 “被 填充 的 ”文本 ， 而 strokeText( 方法 直接 在 画布 上 绘制 
无 填充 的 文本 。 这 两 个 方法 都 包含 4 个 参数 ， 参 数 也 相同 。 以 filTextO) 方法 为 例 ， 语 法 格式 
如 下 : 

context.fillText(text, x, y, maxWidth); 

在 上 述 语 法 中 , text 参 数 指定 在 画布 上 输出 的 文本 , x 表示 开始 绘制 文本 的 x 华 标 位 置 ( 相 
对 于 画布 )，y 表示 开始 绘制 文本 的 y 坐标 位 置 ( 相 对 于 画布 ); maxWidth 是 一 个 可 选 参数 ， 
指定 允许 的 最 大 文本 宽度 ， 单 位 是 像素 。 

measureText() 方法 返回 一 个 对 象 ， 该 对 象 包含 以 像素 指定 的 字体 宽度 。 如 果 需 要 在 输出 
文本 之 前 知道 文本 的 宽度 ， 那 么 可 以 使 用 该 方法 。 该 方法 的 语法 格式 如 下 : 


context.measureText(text).width; 


在 上 述 语 法 中 ，text 参数 表示 要 测量 宽度 的 文本 。 
【 例 5-6】 
向 HTML 网 页 中 添加 代码 显示 一 首 古 诗 ， 标 题 通过 strokeText( 方法 绘制 ， 内 容 则 通过 
fillText() 方法 进行 绘制 。 完 整 的 实现 步骤 如 下 。 
大 外 在 HIML 页 面 的 合适 位 置 添加 canvas 元 素 , 并 指定 其 宽度 、 高度 和 唯一 标识 ID 属性 。 
代码 如 下 : 


<canvas id="canvas1" height=300 width=600> 当前 浏览 器 不 支持 canvas 元 材 </canvas> 


大 区 页 面 加 载 时 绘制 古诗 标题 、 作 者 和 内 容 ， 通 过 JavaScript 代码 为 页 面 指定 load 事件 ， 
首先 绘制 古诗 标题 。 代 码 如 下 : 
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window.onload = function(){ 
var title =" 静夜 思 "; 
var canvas = document.getElementByld("MyCanvas"); 


if(canvas.getContext){ 
var context = canvas.getContext("2d"); // 获取 上 下 文 对 象 
context.font="bold 30px 宋体 "; // 设置 字体 样式 
context.strokeStyle = "#FFFFFF"; // 设置 画笔 的 颜色 
context.strokeText(title,200,30); // 绘制 无 填充 文本 
// 省 略 其 他 绘制 内 容 

有 


} 


区 S 继续 在 上 个 步骤 的 脚本 代码 中 添加 新 代码 ， 指 定 古 诗作 者 ， 通 过 fillText( 方法 绘制 
作者 文本 ， 并 且 重 新 指定 字体 样式 、 填 充 颜色 和 文本 基线 等 内 容 。 代 码 如 下 : 
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context.font="italic 20px 宋体 "; 
context.fillStyle="yellow"; 
context.textBaseline = "bottom"; 
context.fillText(”"” (作者: 李白 ) "340,30); 


鸡 继续 在 前 面 的 代码 后 添加 绘制 古诗 内 容 的 文本 ， 指 定 文本 的 大 小 是 22 像素 ， 字 体 样 
式 是 “楷体 ”， 填 充 颜色 是 丁 FFFFF (白色 )。 代 码 如 下 : 


context.font="22px 楷体 "; 
context.fillStyle="#FFFFFF"; 
context.fillText(" 床 前 明月 光 ，",180,90); 
context.filiText(" 疑 是 地 上 霜 。",180,120); 
context.filiText(" 举 头 望 明 月 ，",180,150); 
context.fillText(" 低头 思 故 乡 。",180,180); 


0 号 运行 上 述 代码 ， 查 看 文本 绘制 的 效果 ， 如 图 5-8 所 示 。 


图 5-8 绘制 普通 文本 效果 


叫 )》 5.3.2 绘制 阴影 文本 

上 下 文 对 象 提供 了 一 系列 与 阴影 有 关 的 属性 ， 通 过 这 些 属性 不 仅 可 以 绘制 文本 的 阴影 效 
果 ， 还 可 以 绘制 图 形 〈 例 如 圆 形 和 扇形 ) 的 阴影 效果 。 表 5-1 列 出 了 常用 的 阴影 属性 。 

表 5-1 常用 的 阴影 属性 

属性 名 称 说 明 
设置 或 返回 用 于 阴影 的 颜色 。 默 认 值 为 全 透明 的 黑色 ， 它 的 值 可 以 是 标准 的 CSS 
颜色 值 
设置 或 返回 用 于 阴影 的 模糊 级 别 ， 默 认 值 为 1。 其 属性 值 必 须 为 比 0 大 的 数字 ， 
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shadowColor 


hadowBlur 

ee 它 的 值 一 般 在 0 到 10 之 间 ， 否 则 将 会 被 忽略 

shadowOffsetX | 设置 或 返回 阴影 距 图 形 的 水 平 距离 ， 也 可 以 理解 为 阴影 与 图 形 的 横向 位 移 量 
shadowOffsetY | 设置 或 返回 阴影 距 图 形 的 垂直 距离 ， 也 可 以 理解 为 阴影 与 图 形 的 纵向 位 移 量 


在 表 5-1 列 出 的 属性 中 ，shadowOffsetX 和 shadowOffsetY 用 于 设置 在 x 轴 和 y 轴 的 延伸 
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距离 ， 它 们 不 受 变换 矩阵 的 影响 。 将 这 两 个 属性 设置 为 负 值 时 ， 表 示 阴 影 向 上 或 向 左 延 伸 ， 
正 值 则 表示 向 下 或 向 右 延伸 ， 它 们 的 默认 值 都 为 1。 


【 例 5-7】 
在 例 5-6 的 基础 上 添加 阴影 属性 ， 分 别 绘制 十 诗 标 题 、 古 诗作 者 和 古诗 内 容 的 文本 阴影 。 
实现 步骤 如 下 。 


由 友 在 JavaScript 脚本 中 绘制 标题 文本 之 前 ， 分 别 设置 阴影 颜色 、 模 糊 级 别 以 及 横向 和 
纵向 位 移 量 。 代 码 如 下 : 


context,font="bold 30px 宋体 "; // 设置 字体 样式 
context.strokeStyle = "#FFFFFF"; // 设置 画笔 的 颜色 
context.shadowColor = "blue"; // 阴影 颜色 

context.shadowBlur = -2; // 阴影 模糊 级 别 ， 这 里 指定 为 2 
context.shadowOffsetX = 2; // 横向 位 移 量 2 
context.shadowOffsetY = -2; // 纵向 位 移 量 -2 


6 罗 找到 绘制 古诗 作者 的 文本 ， 分 别 指定 shadowColor、shadowBlur、shadowOffsetX 和 
shadowOffsetY 的 属性 值 。 部 分 代码 如 下 : 


context,font="italic 20px 宋体 "; 
context.fillStyle="yellow"; 


context.shadowColor = "#FF0000"; // 设置 阴影 颜色 
context,shadowBlur = 0; // 阴影 模糊 级 别 ， 这 里 指定 为 0 
context,shadowOffsetX = -2; // 横向 位 移 量 -2 
context.shadowOffsetY = 2; // 纵向 位 移 量 2 


context.textBaseline = "bottom"; 
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加 吕 在 绘制 古诗 作者 之 后 、 古 诗 内容 之 前 重新 指定 阴影 效果 。 部 分 内 容 如 下 : 


context.shadowColor = "#43CD80"; // 设置 阴影 颜色 
context.shadowBlur = 0; // 阴影 模糊 级 别 ， 这 里 指定 为 0 
context.shadowOffsetX = -2; // 横向 位 移 量 -2 
context.shadowOffsetY = -2; // 纵向 位 移 量 -2 


到 在 浏览 器 中 运行 上 述 代 码 查看 效果 ， 文 本 的 阴影 效果 如 图 5-9 所 示 。 


狗头 电 故 乡 。 


图 5-9 绘制 阴影 文本 效果 


HTMLS+CSS3+ Javascript 网 页 设计 入 门 与 应 用 
SS 


97) 5.4 绘制 曲线 


在 常见 的 图 形 中 ， 曲 线 是 应 用 最 广泛 的 线 型 之 一 ， 因 为 其 形状 不 固定 ， 经 过 简单 变换 即 
可 组 成 复杂 图 案 。HTML5 See pte 分 别 是 二 次 方 贝 塞 尔 曲 线 和 三 次 方 贝 
塞 尔 曲线 ， 下 面 详细 介 和 如 这 两 种 曲线 的 绘制 方 


1())' 5.4.1 一 次 方 由 塞 尔 曲 线 
二 次 方 贝 塞 尔 曲线 需要 两 个 点 ， 第 一 个 点 用 作 二 次 方 贝 塞 尔 计算 中 的 控制 点 ， 第 二 个 点 
是 曲线 的 结束 点 。 曲 线 的 开始 点 是 当前 路 径 中 的 最 后 一 个 点 ， 如 果 路 径 不 存在 ， 那么 需要 使 
用 beginPath() 方法 和 moveTo( 方法 来 定义 开始 点 。 
使 用 上 下 文 对 象 中 的 quadraticCurveTo( 方法 可 以 绘制 二 次 方 贝 塞 尔 曲线 。 该 方法 的 语法 
格式 如 下 : 


context.quadraticCurveTo(cpx,cpy,x,y); 


在 上 述 语法 中 有 4 个 参数 ， 其 中 cpx 和 cpy 表示 贝 塞 尔 控制 点 的 x 坐标 和 y 坐标 ，x 和 y 
则 表示 结束 点 的 x 坐标 和 y 坐标 。 
下 面 代 码 演示 了 quadraticCurveTo() 方法 的 使 用 : 


window.onload = function(){ 
var canvas = document.getElementByld("MyCanvas"); 
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if(canvas.getContext){ 
var context = canvas.getContext("2d"); 
context.beginPath(); 
context.moveTo(20,20); // 设置 绘制 的 起 始点 坐标 
context.quadraticCurveTo(20,100,200,20); // 绘制 二 次 方 贝 塞 尔 曲 线 
context.stroke(); 

} 


} 


在 上 述 代 码 中 ，moveTo(20,20) 指定 绘制 的 起 始点 坐标 ，quadraticCurveTo(20,100,200,20) 
中 (20,100) 表示 绘制 时 曲线 的 控制 点 坐标 , (200,20) 表示 绘制 时 曲线 的 结束 点 坐标 。 


5.4.2 三 次 方 贝 塞 尔 曲 线 

三 次 方 贝 塞 尔 曲 线 需要 三 个 点 : 前 两 个 点 用 作 三 次 方 贝 塞 尔 计算 中 的 控制 点 ， 第 三 个 

是 曲线 的 结束 点 。 曲 线 的 开始 点 是 当前 路 径 中 的 最 后 一 个 点 ， 如 果 路 径 不 存在 ， 可 以 使 
es 和 mayeiog 方法 来 定义 开始 点 。 

使 用 上 下 文 对 象 中 的 bezierCurveTo () 方法 可 以 绘制 三 次 方 贝 塞 尔 曲线 。 该 方法 的 语法 格 
式 如 下 : 


context.bezierCurveTo(cp1x,cpl1y,cp2x,cp2y,x,y); 


bezierCurveTo() 方法 需要 传 入 6 个 参数 : cplx 和 cply 分 别 表 示 第 一 个 贝 塞 尔 控 制 点 的 xX 
坐标 和 y 坐标 ，cp2x 和 cp2y 分 别 表示 第 二 个 贝 塞 尔 控 制 点 的 x 坐标 和 y 坐标 ，x 和 y 分别 表 
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示 结 束 点 的 x 坐标 和 y 坐标 。 
下 面 代码 演示 了 bezierCurveTo() 方法 的 使 用 : 


window.onload = function(){ 


var canvas = document.getElementByld("MyCanvas"); 


if(canvas.getContext){ 
var context = canvas.getContext("2d"); 
context.beginPath(); 
context.moveTo(20,20); // 设置 绘制 的 起 始点 坐标 
context.bezierCurveTo(20,100,200,100,200,20); // 绘制 三 次 方 贝 塞 尔 曲线 
context.stroke(); 


1 
} 


在 上 述 代码 中 ，moveTo(20,20) 表示 起 始点 坐标 ，bezierCurveTo(20,100,200.100,200,20) 中 
的 《20,100) 表示 第 一 个 控制 点 坐标 ，〈200.100) 表示 第 二 个 控制 点 坐标 ，(200,20) 表示 
结束 点 坐标 。 


7) 5.5 变换 图 形 


在 前 面 介 绍 的 所 有 绘制 方法 ， 一 旦 图 形 显示 到 画布 上 便 不 可 以 再 修改 了 ， 这 显然 不 能 满 
足 实际 需求 。 为 此 HIML5 的 上 下 文 对 象 还 提供 了 对 图 形 进行 变换 操作 的 方法 ， 如 平移 图 形 、 
旋转 图 形 或 者 组 合 多 个 图 形 等 。 下 面 详细 介绍 这 些 图 形变 换 操作 及 实现 方法 。 
咱 ) 5.5.1 坐标 变换 

在 HIML5 中 绘制 图 形 时 ， 是 以 坐标 点 为 基准 来 进行 绘制 的 ， 默 认 情 况 下 画布 的 左上 角 
对 应 于 坐标 轴 的 原点 〈0.0) 。 如 果 对 这 个 坐标 轴 进 行 改变 ， 就 可 以 实现 图 形 的 变换 处 理 了 。 
在 HIML5 中 对 坐标 的 变换 处 理 有 3 种 方式 ， 即 平移 、 旋 转 和 缩放 ， 下 面 详细 介绍 每 种 变换 
的 实现 。 

全 图 形 平移 
图 形 平移 需要 使 用 translate() 方法 ， 该 方法 表示 重新 映射 画布 上 的 〈0.0) 位 置 ，〈0.0) 
即 坐 标 原点 。translate() 方法 的 语法 格式 如 下 : 


context.translate(x,y); 


在 上 述 语法 中 需要 传 入 两 个 参数 ， 第 一 个 参数 表示 添加 到 水 平 坐标 x 上 的 值 ， 即 坐标 原 


1dloSeAer+SsSSIOI+S1WNLH 人 


点 向 X 轴 方向 平移 x; 第 二 个 参数 表示 添加 到 垂直 坐标 y 上 的 值 , 即 坐标 原点 向 y 轴 方向 平移 y。 
【 例 5-8】 


下 面 首先 通过 fl]RectO 方法 在 (10.10) 坐 标 处 绘制 宽度 为 100 像素 、 高度 为 50 像素 的 矩形 ， 
然后 平移 原点 坐标 到 〈70.60) ， 平 移 完毕 后 再 次 绘制 该 图 。 代 码 如 下 : 
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window.onload = function(){ 
var canvas = document.getElementByld("MyCanvas"); 
if(canvas.getContext){ 
var context = canvas.getContext("2d"); 


context.fillRect(10,10,100,50); // 使 用 〈10,10) 作为 起 始点 绘制 矩形 
context.translate(70,60); // 将 原点 坐标 移动 到 (70,60) 
context.fillRect(10,10,100,50); // 第 二 次 绘制 矩形 


} 
} 


运行 上 述 代码 查看 平移 后 的 效果 。 由 于 在 绘制 第 二 个 和 矩形 前 将 原点 坐标 移 到 了 (70.60) , 因 
此 当 再 次 使 用 名 IRect(10,10.100.50) 绘制 时 ， 将 使 用 坐标 〈80.70) 作为 起 始点 。 
全 图 形 旋转 
rotate0 方法 用 于 旋转 当前 的 图 形 ， 该 方法 的 语法 格式 如 下 : 


context.rotate(angle); 


上 述 语法 中 的 angle 参数 表示 旋转 角度 ， 单 位 是 弧度 。 如 果 需 要 将 角度 单位 转换 为 弧 
度 ， 可 以 使 用 degrees*Math.PL180 公式 进行 计算 。 例 如 ， 如 果 需 要 旋转 10 度 ， 公 式 则 是 
10*Math.PI180， 旋 转 的 默认 方向 为 顺 时 针 。 

【 例 5-9】 

下 面 代码 在 旋转 30 度 前 后 分 别 绘制 了 一 个 和 矩形。 


window.onload = function(){ 
var canvas = document.getElementByld("MyCanvas"); 
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if(canvas.getContext){ 
Var context = canvas.getContext("2d"); 
context.fillRect(10,10,100,50); // 使 用 〈10,10) 作为 起 始点 绘制 矩形 
context.rotate(30* Math.PI/180); // 旋转 30 度 
context.fillRect(10,10,100,50); // 使 用 〈10,10) 作为 起 始点 绘制 矩形 

1 

} 
思 了 图 形 缩放 


图 形 缩放 是 指 图 形 的 缩小 或 放大 效果 ， 实 现 该 功能 时 需要 调用 scale0 方法 。 如 果 对 图 形 
进行 缩放 ， 之 后 的 所 有 绘图 也 将 会 被 缩放 ， 定 位 也 会 被 缩放 。 例 如 ， 对 于 scale(2,2) 来 说 ， 绘 
图 时 将 定位 于 距离 画布 左上 角 两 售 远 的 位 置 。scale() 方法 的 语法 格式 如 下 : 


context.scale(scalewidth,scaleheight); 


在 上 述 语 法 中 ，scalewidth 参数 表示 当前 绘图 宽度 的 缩放 比例 (1=100%，0.5=50%， 
2=200%， 依 次 类 推 )，scaleheight 参数 表示 当前 绘图 高 度 的 缩放 比例 (1=100%，0.5=50%， 
2=200%， 依 次 类 推 ) 。 
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【 例 5-10] 
下 面 的 代码 在 对 坐标 放大 2 信 前 后 分 别 绘 制 了 一 个 矩形。 


window.onload = function(){ 


var canvas = document.getElementByld("MyCanvas"); 


if(canvas.getContext){ 
var context = canvas.getContext("2d"); 
context.strokeRect(5,5,25,15); // 使 用 〈5.5) 作为 起 始点 绘制 矩形 
context.scale(2,2); 1/ 放 大 2 售 
context.strokeRect(5,5,25,15); // 使 用 〈5.5) 作为 起 始点 绘制 矩形 
} 


y 


外 平移、 旋转 和 缩放 

一 般 情况 下 ， 开 发 者 不 会 单独 使 用 一 种 变形 特效 ， 通 常会 结合 使 用 两 种 或 三 种 变形 特效 ， 
例如 同时 使 用 平移 和 旋转 特效 。 使 用 多 种 特效 时 ， 使 用 顺序 不 同 也 可 能 导致 画 出 的 结果 不 同 
它们 的 顺序 可 能 是 平移 、 旋 转 、 缩 放 ， 平 移 、 缩 放 、 旋 转 ， 缩 放 、 平 移 、 旋 转 ， 缩 放 、 旋 转 、 
平移 ， 旋 转 、 平 移 、 缩 放 ; 旋转、 缩放 、 平 移 。 
图 5-10 显示 了 坐标 轴 变 化 的 两 两 关系 。 其 中 ， 蓝 色 代表 平移 ， 红 色 代表 旋转 ， 绿 色 代表 
旋转 。 
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【 例 5-11]】 

创建 一 个 示例 ， 通 过 调用 平移 、 旋 转 和 缩放 的 方法 绘制 一 个 不 规则 的 相对 比较 复杂 的 图 
搬 ， 实 现 步 骤 如 下 。 

园 友 在 页 面 中 添加 宽度 为 600 像素 、 高 度 为 300 像素 的 canvas 元 素 。 

加 多 添加 JavaScript 脚本 代码 ， 使 用 三 种 坐标 变换 方式 绘制 图 形 。 实 现代 码 如 下 : 


<script type="text/javascript"> 
window.onload = function(){ 


包 var canvas = document.getElementByld("canvas1"); 
if(canvas.getContext){ 
var context = canvas.getContext("2d"); // 获取 上 下 文 对 象 
本 可 context.strokeStyle = "#000000"; // 填充 颜色 
三 context.strokeRect(0, 0, 600, 300); // 绘制 矩形 
context.translate(300, 5); // 将 图 形 平移 
品 context.fillStyle = "#999999"; // 填充 颜色 
填 for(vari= 0;i<50;i++){ 
9) context.scale(0.95, 0.95); 1/ 缩放 
六 context.translate(35, 25); // 平移 
CO context.rotate(Math.PI/ 11); // 旋转 
十 context.shadowColor="#ff0000"; // 阴影 颜色 
ov context.shadowBlur = 20; // 阴影 模糊 路 径 
局 context.fillRect(0, 0, 100, 50); // 绘制 矩形 
} 
(90) 
© } 
4 
三 。 } 
5 </script> 


上 述 代 码 首先 获取 页 面 中 的 canvas 元 网 
素 ， 接着 创建 上 下 文 对 象 ， 通过 fillStyle 属 € 3 G Dfiley///D/Htmlspace/code5/3/index.html 
性 和 filIRect0 绘制 一 个 宽度 为 600 像素 、 高 “| 参 制 复 栗 图形 
度 为 300 像素 的 矩形 ， 绘 制 完毕 后 将 其 进行 
平移 ， 然 后 通过 for 语句 进行 循环 ， 以 此 进行 
缩放 、 平 移 和 旋转 操作 ， 并 且 设 置 图 形 的 阴 
影 颜 色 和 模糊 路 径 ， 最 后 调用 fllRectO 方法 
循环 绘制 宽度 为 100 像素 、 高 度 为 50 像素 的 
和 矩 形 。 

@ 台 在 浏览 器 中 运行 上 述 代 码 查看 绘制 
的 最 终 图 形 ， 如 图 5-11 所 示 。 

o 一 技巧 
| 读者 可 以 过 起 修改 for 语句 中 编 放 、 平 移 和 旋转 的 执行 顺序 ， 将 前 本 到 出 的 6 种 顺 序 一 进行 | 
| 演示 ,这 时 可 以 发 现 (平移 、 旋 转 、 缩 放 ) 与 (平移 、 缩 放 、 旋 转 ) 效果 一 样 ，( 缩 放 、 旋 转 、 平移 ) 
| 与 旋转、 缩放 、 平 移 ) 效果 一 样 。 | 


图 5-11 复杂 图 形 效 果 
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咱 》5.5.2 和 矩 阵 变换 


和 矩 阵 变 换 其 实 是 在 画布 内 实现 平移 、 缩 放 和 旋转 的 一 种 机 制 ， 它 的 主要 原理 是 矩阵 相 乘 。 
和 矩阵 变换 常用 的 一 种 方法 就 是 transform()， 该 方法 的 语法 格式 如 下 : 


context.transform(a,b,c,d,e,f); 


从 上 述 语法 可 以 看 出 ，transform() 方法 有 6 个 参数 : a 和 分 别 表示 水 平 缩放 绘制 和 水 平 
倾斜 绘制 ，c 和 d 分 别 表示 垂直 倾斜 绘制 和 垂直 缩放 绘制 ，e 和 上 分 别 表示 水 平移 动 绘制 和 垂 
直 移 动 绘制 。 

使 用 transform0) 方法 时 ， 画 布 上 的 每 个 对 象 都 拥有 一 个 当前 的 变换 矩阵 ， 该 方法 蔡 换 当 
前 的 变换 答 阵 。 可 以 使 用 下 面 描述 的 矩阵 来 操作 当前 的 变换 矩阵 。 


证 -证 
ocn 
[TL 


使 用 context.transform(1,0,0,1,x.y) 或 contex.transform(0.1,1,0,x.y) 方法 代替 translate(x,y) 
方法 实现 平移 。 在 用 transform() 方法 实现 平移 时 ， 前 4 个 参数 表示 不 对 图 形 进 行 操作 ，x 和 
y 的 设置 分 别 表示 将 原点 坐标 向 右 移动 x 个 像素 ， 并 向 下 移动 y 个 像素 。 

使 用 context.transform(x,0,0,y,0,0) 或 context.transform(0.y,x.0,0) 方法 代替 scale(x,y) 方法 。 
在 用 transform() 方法 实现 缩放 时 ， 前 面 4 个 参数 表示 将 图 形 横向 扩大 或 缩小 x 倍 ， 纵 向 扩大 
或 缩小 y 倍 ， 最 后 两 个 参数 表示 坐标 原点 不 移动 。 

使 用 transform0 方法 实现 旋转 要 比 实现 平移 和 缩放 复杂 ， 它 可 以 通过 两 种 设置 方式 来 实现 。 

第 一 种 方式 实现 旋转 : 


context.transform( 
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Math.cos(angle*Math.PI/180), 
Math.sin(angle*Math.PI/180), 

-Math.sin(angle* Math.Pl/180), 
Math.cos(angle* Math.PI/180), 
0,0); 


第 二 种 方式 实现 旋转 : 


context.transform( 
-Math.sin(angle* Math.Pl/180), 
Math.cos(angle* Math.Pl/180), 
Math.cos(angle* Math.Pl/180), 
Math.sin(angle* Math.Pl/180), 
0,0); 


在 上 述 两 种 方式 的 代码 中 ， 前 4 个 参数 利用 三 角 函 数 完整 旋转 ，angle 参数 表示 按照 顺 时 
针 旋 转 的 角度 ， 最 后 两 个 参数 指定 为 0， 表示 原点 坐标 不 发 生 改 变 。 
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【 例 5-12] 
首先 绘制 一 个 宽度 为 250 像素 、 高 度 为 100 像素 、 填 充 颜色 为 黄色 的 矩形， 接着 通过 
transform() 方法 添加 一 个 变换 和 矩阵 后 再 绘制 一 个 矩形， 然后 再 次 添加 一 个 新 的 变换 和 矩 阵 后 继 
续 绘 制 矩 形 。 在 这 个 过 程 中 ， 每 次 调用 transform() 方法 都 会 在 前 一 个 变换 矩阵 上 构建 新 图 形 。 
实例 的 JavaScript 代码 如 下 : 


window.onload = function(){ 


var canvas = document.getElementByld("MyCanvas"); 


if(canvas.getContext){ 
var context = canvas.getContext("2d"); // 创建 上 下 文 对 象 
context.fillstyle="yellow"; // 填充 颜色 为 黄色 
context.fillRect(0,0,250,100) // 绘制 矩形 
context.transform(1,0.5,-0.5,1,30,10); // 变换 矩阵 
context.fillStyle="red"; // 填充 颜色 为 红色 
context.fillRect(0,0,250,100); // 绘制 矩形 
context.transform(1,0.5,-0.5,1,30,10); // 变换 矩阵 
context.fillStyle="blue"; // 填充 颜色 为 蓝 色 
context.fillRect(0,0,250,100); // 绘制 矩形 

} 


1 


上 述 代码 运行 后 的 最 终 图 形 如 图 5-12 所 示 。 使 用 transform() 方法 后 要 绘制 的 图 形 都 会 按 
照 移动 后 的 原点 坐标 与 新 的 变换 矩阵 相 结合 的 方法 进行 重 置 。 必 要 时 可 以 使 用 setTransform() 
方法 将 变换 矩阵 进行 重 置 ， 该 方法 的 语法 格式 如 下 ;: 


context.setTransform(a,b,c,d,e,f); 
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setTransform() 方法 的 6 个 参 FT CC 
数 的 含义 与 transform0) 方法 一 致 。 € 3 C | fley//D/Htmispace/c bs 三 
简单 来 说 ，setTransform() 方 法 允 矩阵 变换 “ 
许 开发 者 缩放 、 旋 转 、 平 移 并 倾 
和 斜 当前 的 画布 环境 ， 该 变换 只 会 
影响 setIransform() 方法 调用 之 后 
的 绘图 。 


图 5-12 矩阵 变换 效果 1 


【 例 5-13】 
绘制 一 个 矩形 后 通过 setTransform() 方法 重 置 并 创建 新 的 变换 和 矩阵， 接着 绘制 第 二 个 矩形 
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并 创建 新 的 变换 矩阵， 然后 再 绘制 第 三 个 矩形 。JavaScript 实现 代码 如 下 : 


window.onload = function(){ 


var canvas = document.getElementByld("MyCanvas"); 


if(canvas.getContext){ 


} 


var context = canvas.getContext("2d"); 


context.fillStyle="yellow"; 
context.fillRect(0,0,250,100) 


context.setTransform(1,0.5,-0.5,1,30,10); 


context.fillStyle="red"; 
context.fillRect(0,0,250,100); 


context.setTransform(1,0.5,-0.5,1,30,10); 


context.fillstyle="blue"; 
context.fillRect(0,0,250,100); 


上 述 代 码 在 每 次 调用 
setTransform() 时 都 会 重 置 前 一 


个 变换 矩阵 ， 
矩阵 。 
示 红 色 矩 形 ， 


然后 再 构建 新 的 


因此 在 本 示例 中 不 会 显 


因为 它 在 蓝 色 和 矩 


形 的 下 面 ， 最 终 图 形 如 图 5-13 


所 示 。 


// 填充 颜色 为 黄色 
// 绘制 矩形 

// 重 置 变换 矩阵 
// 填充 颜色 为 红色 
// 绘制 矩形 
// 重 置 变换 矩阵 
// 填充 颜色 为 蓝 色 
// 绘制 矩形 


中 HTML 5 次 本 大 全 


x 《和 
所 C Dfie///D/HtmlSpace/c(® 安 


矩阵 变换 


图 5-13 矩阵 变换 效果 2 


咱 》 5:5.3”> 组合 图 形 


在 前 面 的 示例 中 ， 使 月 


上下文 对 象 可 以 将 一 个 


图 形 重 肥 绘制 在 另 一 个 图 形 上 面 ， 但 是 图 


形 中 能 够 被 看 到 的 部 分 完全 取决 于 以 哪 种 方式 进行 组 合 ， 这 时 需要 使 用 图 形 组 合 技术 。 图 形 


组 合 时 涉及 两 个 属性 : 
项 区 globalAlpha 属性 


globalAlpha 和 globalCompositeOperation 。 


globalAlpha 属性 用 于 设置 或 者 返回 绘图 的 当前 透明 值 。 该 属性 值 必须 是 介 于 0.0〈 完 全 


透明 ) 与 1.0〈 不 透明 ) 之 间 的 数字 。 使 用 示例 如 下 : 


context.globalAlpha=1; 
context.globalAlpha=0.5; 


// 设置 为 不 透明 
// 设置 为 半 透明 
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区 globalCompositeOperation 属性 
globalCompositeOperation 属性 用 于 设置 或 者 返回 如 何 将 一 个 源 ( 新 的 ) 图 形 绘制 到 目标 (已 


有 ) 的 图 形 上 。 


其 中 , 源 图 形 是 指 将 要 绘制 的 新 图 形 , 目标 图 形 是 指 已 经 放置 在 画布 上 的 图 形 。 


该 属性 的 值 是 一 个 枚 举 值 ， 可 选 值 及 说 明 如 表 5-2 所 示 。 


表 5-2 globalCompositeOperation 属性 的 取 值 


属性 取 值 说 明 


SOUICe-OVeT 


默认 设置 ， 表 示 新 图 形 和 覆盖 在 原 有 图 形 之 上 


destination-over 


在 原 有 图 形 之 上 绘制 新 图 形 


新 图 形 仅仅 出 现 与 原 有 图 形 相 重 登 的 部 分 ， 其 他 区 域 都 变 成 透明 的 


source-in 
destination-in 原 有 图 形 中 与 新 图 形 重 登 的 部 分 会 被 保留 ， 其 他 区 域 都 变 成 透明 的 
source-out 只 有 新 图 形 与 原 有 内 容 不 重 登 的 部 分 会 被 绘制 出 来 


destination-out 


source-atop 


destination-atop 


lighter 
darker 
xor 


copy 


【 例 5-14] 


原 有 图 形 与 新 图 形 不 重 登 的 部 分 会 被 保留 


只 绘制 新 图 形 和 原 有 图 形 重合 的 部 分 与 未 被 重 登 覆盖 的 原 有 图 形 ， 新 图 形 的 
其 他 部 分 变 成 透明 


只 绘制 原 有 图 形 被 新 图 形 重 登 徐 盖 的 部 分 与 新 图 形 的 其 他 部 分 ， 原 有 图 形 中 
的 其 他 部 分 变 成 黎明 ， 不 绘制 新 图 形 中 与 原 有 图 形 相 重 登 的 部 分 


两 图 形 中 重合 部 分 做 加 色 处 理 

两 图 形 中 重 登 的 部 分 做 减 色 处 理 

重 登 的 部 分 会 变 成 透明 

只 有 新 图 形 会 被 保留 ， 其 他 都 被 清除 


下 面 通 过 一 个 简单 的 案例 实现 组 合 多 个 图 形 的 效果 。 本 案例 通过 循环 设置 
globalCompositeOperation 属性 的 值 实现 组 合 图 形 的 多 个 效果 ， 具 体 步 骤 如 下 。 

大友 添加 新 的 HIML 页 面 ， 在 页 面 的 合适 位 置 添 加 11 个 宽度 为 100、 高 度 为 100 的 
canvas 元 素 ， 用 来 显示 组 合 图 形 的 多 个 效果 。 页 面 的 主要 代码 如 下 : 


<body onLoad="draw()"> 


<canvas height=100 width=100 id="canvas1"></canvas> 


<canvas height=100 width=100 id="canvas2"></canvas> 


人 省 略 其 他 canvas 元 标的 设置 */ 


</body> 


轩 加 页面 加 载 时 调用 JavaScript 脚本 中 的 draw0 函数 ， 该 函数 的 具体 代码 如 下 : 


function draw() 


{ 
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var oprtns=new Array("source-atop","source-in","source-out","source-over","destination-atop", 


"destination-in","destination-out","destination-over", "lighter","copy", 
"darker","xor™); 


for(var i=0;i<12;i++) 


var canvas = document.getElementByld("canvas"+(i+1)); 
if(canvas && canvas.getContext) 
{ 
var context=canvas.getContext("2d"); 也 
context.fillStyle="#FFFFFF"; 
context.fillRect(10,10,60,60); 
context.globalCompositeOperation=oprtns[i]; 工 
context.beginPath(); 三 | 
context.fillStyle="red"; 三 
context.arc(60,60,30,0,Math.Pl*#2,false); /车 
context.fill(); 十 
0 
+ 
上 述 代码 首先 声明 了 一 个 数组 变量 保存 ype 属性 的 所 有 值 ， 然 后 通过 for 语句 显示 ”上 
canvas 元素 的 组 合 效 果 图 。 在 for 语 句 中 首先 调用 fillRect( 函数 绘制 填充 颜色 为 白色 的 正方 形 ， < 
接着 指定 globalCompositeOperation 属性 的 值 ， 最 后 调用 arc() 函数 绘制 填充 颜色 为 红色 的 DD 
圆 形 。 总 
名 运行 本 示例 的 代码 ， 页 面 的 最 终 效 果 如 图 5-14 所 示 。 车 


1d 
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图 5-14 组 合 图 形 的 效果 
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川 ) 5.5.4 ”线性 渐变 

线性 渐变 是 沿 着 一 根 轴线 (水 平 或 者 垂直 ) 改 变 颜色 , 从 起 点 到 终点 颜色 进行 顺序 渐变 (从 
一 边 拉 向 另 一 边 ) 。 上 下 文 对 象 提供 createLinearGradient() 方法 创建 线性 渐变 的 对 象 ， 渐 变 避 
用 于 填充 矩形 、 圆 形 、 线 条 和 文本 等 。createLinearGradient() 方法 的 语法 格式 如 下 : 


context.createLinearGradient(x0,y0,x1,y1); 


在 上 述 语法 中 需要 传 入 4 个 参数 。 其 中 ，x0 和 y0 表示 渐变 开始 点 的 x 坐标 和 y 坐标 ， 
xl 和 yl 表示 渐变 结束 点 的 x 坐标 和 y 坐标 。 

createLinearGradient() 方法 只 是 创建 了 一 个 使 用 两 个 坐标 点 的 LinearGradient 对 象 。 如 果 
要 设置 渐变 的 颜色 则 需要 通过 addColorStop() 方法 。addColorStop() 方法 的 语法 格式 如 下 : 

gradient.addColorStop(stop,color); 


addColorStop() 方法 需要 传 入 两 个 参数 : stop 参数 指定 颜色 离开 渐变 起 始点 的 偏 移 量 ， 它 
的 值 位 于 0 与 1 之 间 ; color 参数 指定 结束 位 置 显示 的 CSS 颜色 值 。 图 5-15 描述 了 偏 移 量 的 
含义 ，0 表示 起 始点 ，1 表示 结束 点 。 
起 始点 偏 移 量 为 0%， 颜 色 为 蓝 色 
蓝 色 渐变 到 白色 


此 处 偏 移 量 为 0.4， 颜 色 为 白色 
色 渐 变 到 红色 


结束 点 偏 移 量 为 1， 颜 色 为 红色 
图 5-15 addColorStop0 方法 中 stop 参数 的 含义 示意 图 
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o 一 技巧 
| 可 以 多 次 调用 addColorStop() 方 法 来 改变 渐变 效果 。 如 果 不 对 渐变 对 象 使 用 addColorStop() 方 法 ， 
| 那么 渐变 将 不 可 见 。 因 此 ， 为 了 获得 可 见 的 渐变 效果 ， 至 少 需要 创建 一 个 渐变 。 | 


【 例 5-15]】 
本 示例 将 结合 使 用 createLinearGradient() 方法 和 addColorStop( 方法 实现 颜色 依次 从 
black 到 magenta、blue、green、yellow 的 渐变 。 
创建 一 个 示例 ， 使 用 彩虹 的 7 种 颜色 生成 一 个 线性 渐变 并 绘制 到 和 矩形 上 ， 实 现 步骤 如 下 。 
辐 友 在 HTML 页 面 中 添加 宽度 为 600、 高 度 为 200 的 canvas 元 素 。 
因 坟 在 画布 中 绘制 颜色 的 线性 渐变 ， 实 现 多 种 颜色 过 渡 。 代 码 如 下 : 


window.onload = function(){ 
var canvas = document.getElementByld("canvas1"); 
var context = canvas.getContext("2d"); 


context.lineWidth = 2; // 指定 边框 的 宽度 为 2 
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context.strokeStyle = "#FFFFFF"; // 边框 颜色 
context.strokeRect(10,10,550,180); // 绘制 矩形 
var gradient=context.createLinearGradient(0,0,550,0); // 创建 LinearGradient 对 象 
gradient.addColorStop(0,"#FF0000"); // 红色 
gradient.addColorStop("0.2","#FF7F00"); // 橙色 
gradient.addColorStop("0.4","#FFFF00"); // 黄色 
gradient.addColorStop("0.5","#00FFOO"); // 绿色 
gradient.addColorStop("0.7","#00FFFF"); // 青色 
gradient.addColorStop("0.9","#0000FF"); // 蓝 色 
gradient.addColorStop(1,"#8BOOFF"); // 紫色 
context.fillStyle=gradient; // 将 填充 颜色 设置 为 渐变 
context.fillRect(10,10,550,180); // 使 用 渐变 绘制 矩形 

} 


看 在 浏览 器 中 运行 上 述 代码 ， 最 终 渐变 效果 如 图 5-16 所 示 。 


口 HTML 5 给 图 
€ © DD file///D:/HtmlSpace/code5/4/index2.html 
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图 5-16 线性 渐变 的 效果 


叫 ) 5.5.5 径 向 渐变 

与 线性 渐变 不 同 ， 径 向 渐变 是 指 以 圆心 为 起 点 沿 着 圆 形 的 半径 向 外 进行 扩散 的 渐变 方式 ， 
如 绘制 太阳 时 沿 着 太阳 的 半径 向 外 扩散 出 去 的 光 旱 就 是 径 向 渐变 变 。 

实现 径 向 渐变 需要 通过 createRadialGradient() 函数 创建 RadialGradient 对 象 ， 该 函数 的 语 


法 格式 如 下 : 


context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd); 


上 述 语法 中 包含 6 个 参数 , xStart 参数 和 yStart 参数 分 别 表示 渐变 开始 时 圆 的 圆心 横 坐 标 ， 
radiusStart 参数 表示 开始 圆 的 半径 , xEnd 参数 和 yEnd 参数 分 别 表示 渐变 结束 时 圆心 的 横 坐 标 ， 
ods 参数 表示 结束 圆 的 半径 。 

径 向 渐变 设 定 颜色 时 与 线性 渐变 相同 ， 需 要 使 用 RadialGradient 对 象 的 addColorStop() 函 
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数 进行 设 定 ， 同 样 需 要 设置 0 到 1 之 间 的 浮 点 数 作 为 渐变 转折 点 的 偏 移 量 。 
【 例 5-16】 
创建 一 个 示例 ， 先 调用 createRadialGradient() 函数 创建 径 向 渐变 对 象 ， 再 使 用 flStyle 属 
性 、arc0 函数 及 addColorStop0 函数 等 实现 绘制 径 向 渐变 的 效果 ， 实 现 步 骤 如 下 。 
大 骤 在 HIML 页 面 中 添加 宽度 为 600、 高 度 为 200 的 canvas 元 素 。 
四 如 页 面 加 载 时 调用 draw0 函数 ， 该 函数 会 实现 绘制 径 向 渐变 的 效果 。 具 体 代码 如 下 : 


function draw() 


{ 
var canvas = document.getElementByld("canvas"); // 获取 canvas 元 票 
var context = canvas.getContext("2d"); // 创建 画布 
context.lineWidth = 2; // 指定 边框 的 宽度 为 2 
context.strokeStyle = "#FFFFFF"; // 边框 颜色 
context.strokeRect(10,10,550,180); // 绘制 矩形 
var g1 = context.createRadialGradient(400, 0, 0, 400, 0, 400); // 创建 RadialGradient 对 象 
gl1.addColorStop(0.1, "rgb(255, 255, 0)"); // 设置 渐变 颜色 


gl1.addColorStop(0.3, "rgb(0, 255, 255)"); 
gl1.addColorStop(0.5, "rgb(45, 125, 255)"); 
g1.addColorStop(1, "rgb(255, 0, 255)"); 
context,fillStyle = g1; 


context.fillRect(10, 10, 550, 180); // 绘制 矩形 

varn=0; 

var g2 = context.createRadialGradient(250, 250, 0, 250, 250, 300); 。 // 创建 RadialGradient 对 象 
g2.addColorStop(0.1, "rgba(43, 255, 243, 0.3)"); // 设置 渐变 颜色 


g2.addColorStop(0.7, "rgba(255, 255, 0, 0.5)"); 
g2.addColorStop(1, "rgba(0, 0, 255, 0.8)"); 
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for(vari= 0;i< 10; i++) // 遍历 显示 圆 形 
context.beginPath(); // 创建 绘制 路 径 
context.fillstyle = g2; // 设置 样式 
context.arc(i * 25, i * 25, i * 10, 0, Math.Pl * 2, true); // 绘制 圆 形 路 径 
context.closePath(); // 关闭 路 径 
context.fill(); 

} 


.} 


上 述 代 码 中 首先 通过 context 对 象 的 createRadialGradient() 函数 创建 两 个 RadialGradient 
对 象 ， 然 后 分 别 调用 该 对 象 的 addColorStop0 函数 设置 渐变 颜色 ， 在 82 对 象 中 用 
addColorStop() 函数 指定 渐变 颜色 时 ，0.3、0.5 和 0.8 分 别 表示 其 透明 度 。for 语句 用 于 循环 
绘制 圆 形 ， 在 该 语句 中 beginPath( 函数 创建 开始 的 路 径 ，fillStyle 的 属性 值 设置 为 82 对 象 ， 
arc() 函数 绘制 圆 形 。 

大 呈 运行 本 示例 的 代码 进行 测试 ， 页 面 的 最 终 效果 如 图 5-17 所 示 。 
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口 HTML 5 给 图 
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径 向 渐变 


图 5-17 径 向 渐变 的 效果 


2 5.6 ”使 用 图 像 


在 HTML5 中 , 不 仅 可 以 使 用 canvas API 绘 制图 形 , 还 可 以 读 取 磁盘 或 网 络 中 的 图 像 文件 ， 
然后 将 图 像 绘 制 在 画布 中 。 下 面 详细 介绍 有 关 图 像 的 操作 ， 如 绘制 图 像 和 平 铺 图 像 等 。 


改 ) 5.6.1 绘制 图 像 


在 HTML5 中 ， 绘 制图 像 需 要 使 用 drawImage() 函数 ， 使 用 该 函数 可 以 绘制 图 像 的 某 一 部 
分 ， 添 加 或 者 减少 图 像 的 尺寸 。drawImage( 函数 有 三 种 语法 格式 ， 下 面 依次 介绍 。 

中 ‘drawlmage(image,dx,dy) 

这 是 最 常用 的 一 种 格式 ， 需 要 传 入 3 个 参数 : 第 一 个 参数 是 指 image 对 象 ， 它 不 仅 可 以 
指向 img 元 素 ， 还 可 以 是 video 元 素 或 者 JavaScript 中 的 image 对 象 ， 第 二 个 参数 是 指 目标 X 
坐标 ， 即 在 画布 中 的 横 坐 标 ， 第 三 个 参数 是 指 目标 y 坐标 ， 即 在 画布 中 的 纵 坐标 。 

【 例 5-17] 

下 面 通过 一 个 具体 的 示例 演示 drawImage(image.dx,dy) 的 使 用 ， 步 骤 如 下 。 

加 碍 在 页 面 中 添加 一 张 图 片 和 一 个 canvas 元 素 。 代 码 如 下 : 


<img src="images/fox.jpg " id="img" style="border:2px solid #FFF;height:150px;width:150px" /> 
<canvas id="canvas1" style="border:2px solid #FFF;height:150px;width:150px"></canvas> 


因 罗 添加 JavaScript 脚本 代码 ， 直 接 调用 drawImage(image.dx,dy) 方法 绘制 图 像 ， 指 定 绘 
制图 像 时 的 起 点 坐标 〈0.0) 。 代 码 如 下 : 


window.onload = function(){ 
var canvas = document.getElementByld("canvas1"); 
if(canvas.getContext){ 
var context = canvas.getContext("2d"); 
var image=document.getElementByld("img"); 


context.drawlmage(limage,0,0); 
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} 
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看 在 浏览 器 中 运行 上 述 代码 ， 查 看 绘图 效果 ， 如 图 5-18 所 示 。 


中 Frvt 直面 


€ 3 G Dfile///D:/HtmlSpace/codes/S/indexhtml 空 三 


图 5-18 显示 普通 图 像 效 果 


个 试 一 试 - _ 
| 

通过 这 种 形式 绘制 图 像 时 ， 如 果 图 像 的 高 度 小 于 或 等 于 画布 的 高 度 ， 那么 绘制 时 图 像 正常 显示 。 

如 果 图 像 的 高 度 大 于 画布 的 高 度 ,， 即 画布 高 度 不 够 , 那么 将 会 绘制 图 像 的 一 部 分 ,效果 如 图 5-19 所 示 。 


中 HTML :加 
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1dl13SeAer+ESSI+9T1W1H 人 


图 5-19 ”图像 大 于 画布 宽度 的 效果 | 


2 drawlmage(img,dx,dywidth,height) 


与 上 一 种 方式 相 比 ， 这 种 方式 多 了 两 个 参数 ，width 和 height 分 别 表示 绘制 图 像 的 宽度 和 
高 度 。 例 如 ， 更 改 例 5-17 中 的 代码 ， 指 定 绘制 图 像 的 宽度 和 高 度 都 为 150 像素 。 代 码 如 下 : 


context.drawlmagel(image,0,0,150,150); 


刷新 浏览 器 查看 效果 ， 如 
5-20 所 示 。 与 图 5-19 对 比 CB fe///D:/HtmlSpace/code5/5/index.html 交 | 三 
以 发 现 ， 由 于 在 绘制 时 指定 
图 像 的 宽度 和 高 度 ， 因 此 即 
源 图 尺寸 大 于 画布 也 不 会 出 
现 被 裁剪 的 效果 。 


站 -| 十 于 


图 5-20 指定 图 像 的 宽度 和 高 度 效 果 
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医 区 drawlmage(img,sx,syswidth,sheight,dx,dywidth,height) 

使 用 这 种 格式 可 以 剪 切 图 像 ， 并 在 画布 上 定位 被 剪 切 的 部 分 。 该 语法 有 9 个 参数 ， 其 中 ， 
img 指定 要 使 用 的 图 像 、 画 布 或 者 视频 ，sx 和 sy 表示 开始 剪 切 时 x 坐标 和 y 坐标 的 位 置 ， 
swidth 和 sheight 表示 被 剪 切 图 像 的 宽度 和 高 度 ，dx 和 dy 分 别 表示 在 画布 上 放置 图 像 的 x 坐 
标 和 y 坐标 的 位 置 ，width 和 height 是 可 选 参数 ， 表 示 要 使 用 的 图 像 的 宽度 和 高 度 〈 伸 展 或 者 
缩小 图 像 ) 。 

例如 ， 继 续 在 例 5-17 的 基础 上 更 改 内 容 。 代 码 如 下 : 


context.drawlmagelimage,0,0,150,150,0,0,150,250); 


刷新 浏览 器 查看 效果 ， 如 图 5-21 所 示 。 


DD HTML 5 给 图 
te © DD fey///D:/HtmlSpace/code5/5/index4.htmlY? 三 


图 5-21 前 切 效果 


川 )》 5.6.2 平 铺 图 像 


图 像 平 铺 是 指 按照 一 定 的 比例 缩小 图 像 并 将 画布 铺 满 。 图 像 平 铺 功 能 的 实现 有 两 种 方式 ， 使 
用 上 下 文 对 象 的 drawImage0 函数 或 者 createPattem0 函数 。createPattem0 函数 的 语法 格式 如 下 : 


context.createPattern(image,type); 


上 述 语法 中 有 两 个 参数 ，image 表示 要 平 铺 的 图 像 ，type 表示 平 铺 的 类 型 。type 参数 有 
以 下 取 值 。 

@ repeat-x 横向 平 铺 。 

@ repeat-y 纵向 平 铺 。 

@ no-repeat 不 平 铺 。 

@ repeat 全 方向 平 铺 。 

使 用 createPattern() 函数 实现 平 铺 图 像 功能 要 比 使 用 drawImage( 函数 简单 得 多 ， 只 需要 
几 个 简单 的 步骤 即 可 轻松 完成 ， 其 主要 步骤 如 下 。 

看 友 创建 image 对 象 并 指定 图 像 文 件 后 使 用 createPattern() 函数 创建 填充 样式 。 

四 加 将 样式 指定 给 图 形 上 下 文 对 象 的 fillStyle 属性 。 

大名 填充 画布 。 

【 例 5-18] 

创建 一 个 示例 ， 在 画布 上 分 别 使 用 drawImage() 函数 和 createPatterm() 函数 实现 图 像 的 平 
铺 ， 实 现 步 又 如 下 。 

IO 三 创建 一 个 HTML5 页 面 , 添加 一 个 宽 为 600 像 素 、 高 为 200 像 素 、id 为 canvasl 的 画布 。 

上 @ 驴 编写 代码 调用 drawImage() 函数 实现 图 像 平 铺 的 效果 。 实 现代 码 如 下 : 
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window.onload = function(){ 


var canvas = document.getElementByld("canvas1"); 


var context = canvas.getContext("2d"); 


var img = new Imagel(); // 创建 img 对 象 
img.src="images/xy_bg1.png"; // 要 平 铺 图 像 的 路 径 
img.onload = function(){ 

var scale = 1.5; // 平 铺 比 例 

var n1 = img.width/scale; // 缩小 后 图 像 宽度 
var n2 = img.height/scale; // 缩小 后 图 像 高 度 
var n3 = canvas.width/n1; // 平 铺 横向 个 数 

var n4 = canvas.height/n2; // 平 铺 纵向 个 数 


for(var i=0;i<n3;i++) 
for(var j=0;j<n4;j++) 
context.drawlmage(img,i*n1,j*n2,n1,n2); 


上 述 代 码 将 会 按 img 指定 图 像 的 1.5 售 在 画布 上 平 铺 ， 平 铺 效果 如 图 5-22 所 示 。 
3) 编写 代码 调用 createPattern() 函数 实现 图 像 平 铺 的 效果 。 实 现代 码 如 下 : 


window.onload = function(){ 
var canvas = document.getElementByld("canvas1"); 
Var context = canvas.getContext("2d"); 
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var img = new Image(); // 创建 img 对 象 
img.src="images/xy_bg1.png"; // 要 平 铺 图 像 的 路 径 
es img.onload = function(){ 

Pa var pattern = context.createPattern(img,"repeat"); // 设置 平 铺 方式 
context.fillStyle=pattern; // 指定 fillstyle 属性 
context.fillRect(0,0,600,200); // 填充 画布 

} 


} 


上 述 代 码 调 用 createPattern() 函数 指定 repeat 值 ， 因 此 会 在 画布 上 按 水 平和 垂直 两 个 方向 
平 铺 img 元 素 ， 平 铺 效果 如 图 5-23 所 示 。 


图 5-22 drawImage0 函数 平 铺 效 果 图 5-23 ”createPattermO 函数 平 铺 效果 
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叫 ) 5.6.3 ”裁剪 和 复制 图 像 


裁剪 图 像 是 指 在 画布 内 使 用 路 径 时 只 绘制 该 路 径 所 包括 区 域内 的 图 像 ， 而 不 绘制 路 径 外 
部 的 图 像 。 上 下 文 对 象 中 的 clip0 函数 实现 了 图 像 的 裁剪 功能 ， 该 函数 会 使 用 路 径 在 画布 上 
设置 一 个 裁剪 区 域 ， 因 此 必须 先 创建 好 路 径 ， 然 后 调用 clip0) 函数 完成 裁剪 。 

在 5.6.1 节 介 绍 了 drawImage() 函数 有 3 种 形式 ， 使 用 该 函数 时 如 果 传递 9 个 参数 可 以 实 
现 图 像 复制 的 功能 ， 该 功能 也 可 以 看 作 变 相 地 实现 了 图 像 裁剪 的 功能 。 

【 例 5-19]】 
创建 一 个 示例 演示 如 何 使 用 clip0 函数 和 drawImage() 函数 实现 图 像 的 裁剪 和 复制 功能 。 

大友 创建 一 个 HTML5 页 面 。 在 页 面 的 合适 位 置 添加 一 个 img 元 素 显 示 原 图 ， 以 及 两 个 
canvas 元 素 分 别 显 示 裁 剪 和 复制 后 的 效果 。 代 码 如 下 : 


<img src="images/bg.jpg" style="border:2px solid #F00;height:300px;width:300px;vertical-align: baseline;"/> 
<canvas id="canvas1" style="border:2px solid #F00;height:300px;width:300px"></canvas> 
<canvas id="canvas2" style="border:2px solid #F00;height:300px;width:300px"></canvas> 


加 及 在 canvasl 中 显示 裁剪 后 的 图 像 效 果 ， 裁 剪 代 码 如 下 ; 


var canvasl = document.getElementByld("canvas1"); 
var context1 = canvas1.getContext("2d"); 
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var img=new Image(); // 创建 img 对 象 
img.src="images/bg.jpg"; // 设置 图 像 路 径 
img.onload = function(){ 
context1.beginPath(); // 开始 绘制 路 径 
context1.arc(150,75,100,0,Math.Pl*2,true); // 绘制 圆 形 
context1.save(); 
context1.closePath(); // 结束 绘制 路 径 
context1.clip(); // 切割 选中 的 圆 形 区 域 
context1.stroke(); // 填充 切割 的 路 径 
context1.drawlmagelimg,0,0,300,300); // 被 切割 的 图 像 


context1.restore(); 


上 述 代码 首先 创建 Image 对 象 ， 然 后 调用 arc0 函数 绘制 圆 像 ， 接 着 调用 clip0 函数 裁剪 
图 像 ， 再 调用 drawImage() 函数 绘制 裁剪 后 的 图 像 。 
全 台 在 canvas2 中 显示 复制 后 的 图 像 效 果 ， 代 码 如 下 : 


var canvas2 = document.getElementByld("canvas2"); 
var context2 = canvas2.getContext("2d"); 
var img = new Image(); 
img.src = "images/bg.jpg"; 
img.onload = function () { 
context2.drawlmagel(img, 50, 150, 300, 300,0,0,300,300); 
} 
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上 述 代码 首先 创建 image 对 象 img 并 指定 该 对 象 的 src 属性 ， 然 后 在 img 对 象 的 onload 
事件 中 调用 drawImage() 函数 ， 且 在 该 函数 中 传 入 9 个 参数 ， 直 接 实 现 图 像 复 制 〈 或 裁剪 ) 
的 效果 。 

0 鸡 运行 页 面 会 看 到 3 个 图 像 ， 分 别 是 原 图 、 裁 前 效果 和 复制 效果 ， 如 图 5-24 所 示 。 


口 HTML 5 给 图 
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裁剪 和 复制 图 像 


图 5-24 裁剪 和 复制 图 像 效 果 


7 5.7 ”实践 案例 : 制作 图 像 黑 白 和 反 转 效果 


在 网 页 中 对 图 像 进行 颜色 的 转换 很 重要 ， 同 一 个 图 像 在 网 页 中 相同 的 位 置 显示 不 同 的 颜 
色 所 起 到 的 效果 是 不 一 样 的 。 本 次 案例 通过 对 彩色 图 像 实现 黑白 和 反 转 效果 来 讲解 如 何 对 图 
像 的 颜色 进行 处 理 。 

黑白 效果 很 容易 理解 ， 这 里 不 做 介绍 。 假 设 ， 图 像 上 某 一 点 像素 的 颜色 是 RGBA 
(255,0,100,255)， 取 反 后 该 像素 的 RGBA 变 为 《0.255.155.255) ， 注意 透明 度 Alpha 是 不 变 的 ， 
这 就 是 反 转 效果 。 

无 论 是 黑白 效果 还 是 反 转 效果 都 需要 使 用 上 下 文 对 象 的 putImageData() 函数 和 
getImageData() 函数 来 实现 。 

(1) getImageData(x,y,w.h) 函数 。 

该 函数 用 于 获取 图 像 的 像素 数据 。 其 中 ，x 参数 为 横 轴 坐标 ，y 参数 为 纵 轴 坐标 ，w 参数 
为 所 选区 域 的 宽度 ，h 参数 为 所 选区 域 的 高 度 。 

(2) putImageData(img,x,y) 函数 。 

putImageData() 用 于 修改 图 像 的 像素 数据 。 其 中 ，img 参数 为 需要 重新 绘制 的 图 像 ，x 参 
数 为 新 图 像 的 横 轴 起 始 坐标 ，y 参数 为 新 图 像 的 纵 轴 起 始 坐标 。 

了 解 这 两 个 函数 的 作用 及 语法 之 后 ， 下 面 开 始 实现 案例 。 

回答 创建 一 个 HTML5 页 面 ， 在 合适 位 置 添 加 img 元 素 显 示 处 理 前 的 原 图 效果 ， 以 及 两 
个 canvas 元 素 分 别 应 用 黑白 效果 和 反 转 效果 。 代 码 如 下 : 
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<img src="images/timg.jpg" id="img" style="border:2px solid #FFF;vertical-align: baseline;height:300px;widt 
h:300px" /> 
<canvas id="canvas1" style="border:2px solid #FFF;height:300px;width:300px"></canvas> 


<canvas id="canvas2" style="border:2px solid #FFF;height:300px;width:300px"></canvas> 


加 驴 编写 代码 实现 在 画布 canvasl 上 显示 黑白 效果 ， 代 码 如 下 : 


window.onload = function(){ 
var canvas1 = document.getElementByld("canvas1"); 
var picWidth = 300; // 图 像 宽度 
var picHeight = 300; // 图 像 高 度 
var picLength = picWidth * picHeight; 


var mylmage = new Image(); 

Var ctx1 = canvas1.getContext("2d"); 

mylmage.src = "images/timg.jpg"; // 指定 图 像 的 路 径 

mylmage.onload = function(){ 
ctx1.drawlmage(mylmage, 0, 0,300,300); 


getColorDatal); // 获取 图 像 的 数据 
putColorDatal(); // 修改 图 像 的 数据 
} 
function getColorData() { 


mylmage = ctx1.getImageData(0, 0,300,300); 
for (vari= 0;i< picLength * 4;i+= 4){ 


var myRed = mylmage.data[i]; 
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var myGreen = mylmage.data[i+ 1]; 


1d 


var myBlue = mylmage.data[i+ 2]; 

myGray = parselnt((myRed + myGreen + myBlue) / 3); 
mylmage.data[i] =myGray; 

mylmage.data[i+ 1]=myGray; 

mylmage.data[i + 2] =myGray; 


} 
function putColorData() { 
ctx1.putlImageData(mylmage,0,0); 


3 编写 代码 实现 在 画布 canvas2 上 显示 反 转 效果 ， 代 码 如 下 : 


var canvas2 = document.getElementByld("canvas2"); 
Var ctx2 = canvas2.getContext("2d"); 


var img = new Imagel(); 
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img.src = "images/timg.jpg"; 
img.onload = function(){ 
ctx2.drawlmagelimg, 0, 0,300,300); 
var imgData=ctx2.getlmageData(0,0,300,300); 
for (i=0; i<imgData.width*imgData.height*4;i+=4) 
{ 
imgData.data[i]=255-imgData.data[i]; 
imgData.data[i+1]=255-imgData.data[i+1]; 
imgData.data[i+2]=255-imgData.data[i+2]; 
imgData.data[i+3]=255; 
} 
ctx2.putlImageDatalimgData,0,0); 


} 


办 保存 上 述 步骤 对 文档 的 修改 ， 在 浏览 器 中 打开 查看 效果 ， 如 图 5-25 所 示 。 这 里 要 注 
意 ， 出 于 安全 的 考虑 ，HTML5 禁止 跨 域 对 canvas 进行 修改 ， 因 此 本 案例 需要 在 Web 服务 器 
环境 下 运行 。 


六 HTML 5 绽 图 
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黑白 和 反 转 效果 
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图 5-25 黑白 和 反 转 效果 


7 5.8 练习 题 


一 、 填 空 题 


1. HIMLS 获取 上 下 文 对 象 需要 调用 函数 。 


一 


< 你 上 机 练习 1: 
利用 本 章 介绍 的 知识 绘制 一 个 比较 复杂 的 图 


给 


2. 使 用 函数 可 以 绘制 圆 形 。 

3. 要 保存 图 像 时 需要 调用 函数 。 

4. 绘制 矩形 边框 的 是 函数 。 

5， 绘制 文本 时 可 以 通过 设置 属性 设置 字体 。 

6. 将 图 像 进行 平移 需要 调用 函数 。 

二 、 选 择 题 

bh 函数 可 以 将 图 像 以 base64 位 方式 输出 到 浏览 器 中 
A. toDataURL() B. strokeRect() 

C. fillRect() D. drawImage() 

2. 绘制 图 像 完毕 ， 可 以 调用 方法 关闭 路 径 。 

A. startPath() B. clip0 

C. beginPath() D. closePath() 

3. 通过 调用 属性 可 以 设置 阴影 的 模糊 程度 。 

A. shadowColor shadowBlur 

C. shadowOffsetX D. shadowOffsetY 

4. 在 HIML5S 中 ， 下 列 drawImage() We 
A. drawImage 全 . drawImage (x,y) 

C. drawImage(image,dx,dy) drawImage(image) 

5， 以 填充 的 方式 绘制 文字 时 需要 调 有 函数 。 

A. flRectO BTextO 

C. fllTextO D. strokeText() 

6. 绘制 线性 渐变 和 径 向 渐变 时 都 需要 调用 函数 追加 颜色 的 渐变 效果 。 
A. createLinearGradient() B. createRadialGradient() 
C. addColorStopO) D. createColorStop() 

7. 平移 一 个 坐标 需要 用 到 下 列 哪个 方法 ? 

A. translate() B. scale() 

C. rotate() D. fillRectO 


绘制 复杂 图 形 


出 了 需 用 到 的 数学 运算 代码 。 


var x = Math.sin(0); 

var y = Math.cos(0); 

var dig = Math.Pl / 15 * 11; 

for (vari= 0; i< 30; i++){ 
var x = Math.sin(i * dig); 
vary = Math.cos(i * dig); 
context.lineTo(dx +x * s, dy +y * s); 


} 


像 ， 该 图 像 的 最 终 效果 如 图 5-26 所 示 。 下 面 


HTMLS 绘图 应 用 EE| 
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图 5-26 复杂 图 形 效果 


< 上 机 练习 2: 栽 剪 图 像 


利用 drawImage0 方法 实现 图 像 的 平 铺 和 裁剪 功能 ， 最 终 效果 如 图 5-27 所 示 ， 其 中 左边 
是 图 像 的 原始 效果 ， 右 侧 是 裁剪 后 的 效果 。 
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D 上 机 演习 2 x 
< © | © fileVW/EVHtmlSpace/code5/tesVtest2.html 
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图 5-27 裁剪 图 像 效 果 
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在 传统 的 HTML 时 代 ， 浏 览 器 只 是 一 个 简单 的 “界面 呈现 工具 ”: 浏览 器 负责 向 远程 服务 
器 发 送 请 求 ， 并 读 取 服 务 器 响应 的 HTML 文档 ， 再 “呈现 ”HTML 文档 。 但 是 ， 如 何 更 好 地 在 
客户 端 存储 请 求 数据 ， 一 直 是 开发 者 比较 棘手 的 问题 。 

HTML5 的 出 现 改变 了 这 种 局 面 .HTML5 增 加 了 全 新 的 数据 存储 方式 代替 原来 的 Cookie 方 
案 ， 可 以 临时 或 者 永久 地 将 数据 存储 在 客户 端 而 无 须 与 服务 器 交互 ， 极 大 地 减轻 了 服务 端的 
压力 ， 加 快 了 页 面 浏览 的 速度 。 本 章 将 详细 介绍 HTML5 中 的 这 种 数据 存储 方式 及 其 使 用 方法 
和 技巧 。 


人 | 本 章 学 习 要 点 
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7 6.1 Web 存储 简介 


在 HIML4 中 通常 使 用 Cookie 存储 机 制 ， 但 是 由 于 Cookies 有 限制 保存 数据 空间 大 小 、 
数据 保密 性 差 、 代 码 操作 复杂 等 缺点 已 经 完全 无 法 满足 如 今 开发 者 的 需求 。 

HTMLS5 规范 定义 了 一 种 更 好 地 在 客户 端 存储 数据 的 方式 。 根 据 时 效 性 可 以 将 数据 分 为 
会 话 数据 和 永久 数据 两 种 类 型 ， 分 别 对 应 于 sessionStorage 对 象 和 localStorage 对 象 。 本 节 在 
详细 介绍 这 两 个 对 象 的 使 用 之 前 ， 首 先 与 传统 的 Cookie 进行 简单 对 比 。 


叫 )》 6.1.1 Web 存储 和 Cookie 存储 


大 家 知道 ，Web 存储 和 Cookie 存储 都 是 用 来 储存 客户 端 数据 的 。Cookie 是 最 简单 的 用 
来 存储 客户 端 数据 的 一 种 方式 。 它 需要 指定 作用 域 ， 不 可 以 跨 域 使 用 。 它 的 优点 在 于 ， 人 允许 
用 户 在 登录 网 站 时 记 住 用 户 输入 的 用 户 名 和 密码 ， 这 样 在 下 一 次 登录 时 就 不 需要 再 次 输入 了 ， 
从 而 达到 自动 登录 的 效果 。 

Web 存储 的 概念 和 Cookie 相似 ， 但 是 它们 还 是 有 区 别 的 。 主 要 区 别 有 以 下 几 点 。 

(1) 储存 大 小 不 同 。 

Cookie 的 大 小 是 受 限 制 的 ， 并 且 每 次 用 户 请 求 一 个 新 的 页 面 时 ，Cookie 都 会 被 发 送 过 去 ， 
这 样 无 形 中 会 造成 资源 浪费 。 而 Web 存储 中 每 个 域 的 存储 大 小 默认 是 SMB， 相 比 Cookie 的 
4KB 要 大 得 多 。 

(2) 自身 方法 不 同 。 

Web 存储 拥有 getItem()、setItem()、removelItem()、clear() 等 方法 ，Cookie 需要 前 端 开 发 
者 自己 封装 Cookie 的 读 取 和 写 入 方法 。 

(3) 存储 有 效 时 间 不 同 。 

Cookie 的 失效 时 间 用 户 可 以 自行 设置 ， 它 的 失效 时 间 可 长 可 短 。 但 是 Web 存储 中 的 
localStorage 对 象 只 要 不 手动 删除 ， 它 的 存储 时 间 就 永远 不 会 失效 ， 而 sessionStorage 对 象 只 
要 浏览 器 关闭 ， 它 的 存储 时 间 就 失效 。 

(4) 作用 范围 不 同 。 

Cookie 的 作用 是 可 以 与 服务 器 交互 ， 作 为 HITP 规范 的 一 部 分 存在 ， 而 Web 存储 仅仅 是 
为 本 地 存储 数据 服务 。 

任何 事物 都 有 两 面 性 ， 就 像 Web 存储 和 Cookie 存储 ， 它 们 自身 有 优点 也 有 缺陷 ，Cookie 
存储 不 能 替代 Web 存储 ， 同 样 Web 存储 更 不 能 代替 Cookie 存储 。 
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| ”Web 存储 的 数据 取决 于 浏览 器 ， 并 且 每 个 浏览 器 部 是 独立 的 。 如 果 用 户 使 用 Opera 浏览 器 访 | 
问 网 站 ， 那 么 所 有 的 数据 都 存储 在 Opera 浏览 器 的 Web 存储 库 中 ;如果 用 户 使 用 Chrome 浏览 器 再 | 
次 访问 该 站 点 ， 将 不 能 够 使 用 通过 Opera 浏览 器 存储 的 数据 。 j 
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i) 6.1.2 sessionStorage 对 象 

sessionStorage 对 象 主要 是 针对 一 个 session 〈 用 户 会 话 ) 的 数据 存储 。 它 适用 于 存储 短期 
的 数据 ， 在 同 域 中 无 法 共享 ， 并 且 在 用 户 关 闭 窗口 后 数据 将 被 清除 。 

在 使 用 sessionStorage 对 象 前 应 先 检查 浏览 器 是 否 支持 该 对 象 ， 检 测 代 码 如 下 : 


第 6 章 HTMLS 数据 存储 
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if( typeof(Storag e)!=="undefined" ) 


{ 

// 支持 sessionStorage 对 象 
}else{ 

// 不 支持 sessionStorage 对 象 
} 


也 可 以 通过 以 下 示例 实现 : 


if( 册 window.sessionStorage ) 


{ 

// 支持 sessionStorage 对 象 
}else{ 

/1/ 不 支持 sessionStorage 对 象 
} 


sessionStorage 对 象 使 用 “key:value” 键 值 对 来 存储 数据 ， 该 对 象 的 常用 方法 如 下 。 
e@ setltem() 保存 数据 。 
getltem() ”获取 数据 。 
removeltem() 删除 数据 。 
clear() 清除 localStorage 对 象 中 所 有 的 数据 。 
key() ”获取 指定 下 标的 键 名 称 ( 如 同 Array ) 。 
【 例 6-1】 

下 面 通过 实现 一 个 用 户 计数 器 来 演示 如 何 使 用 sessionStorage 对 象 写 入 和 读 取 数 据 。 首 先 

为 页 面 添加 显示 计数 器 的 HIML 代码 ， 代 码 如 下 : 


<p> 当前 页 面 访问 量 : <span id="num"></span></p> 
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上 述 代码 定义 了 一 个 id 为 num 的 span 元 素 用 于 显示 计数 器 的 数字 。 调 用 
sessionStorage 对 象 的 代码 如 下 : 
<script type="text/javascript"> 
if(supportSessionStorage()){ // 检测 是 否 支 持 sessionStorage 对 象 
if (sessionStorage.pagecount) // 判断 是 否 第 一 次 打开 
{ 
var old_val = Number(sessionStorage.pagecount); // 获取 当前 的 数字 
sessionStorage.pagecount= old_val+1; // 累加 后 进行 保存 
jelsef 
sessionStorage.pagecount=1; // 设置 初始 值 为 1 
上 
varnum = document.getElementByld('num'); 
num.innerText = sessionStorage.pagecount; // 在 页 面 显示 最 新 的 数字 
} 
</script> 
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上 述 代 码 中 ， 访 问 该 页 面 时 首先 调用 函数 supportSessionStorage() 检测 浏览 器 是 否 
持 sessionStorage 对 象 。 如 果 浏览 器 支持 再 判断 当前 会 话 中 是 否 存在 pagecount 属性 ， 第 一 
次 加 载 时 该 属性 不 存在 ， 故 使 用 初始 值 1， 以 后 每 次 加 载 时 都 在 原来 基础 上 递增 。 最 后 将 
pagecount 属性 显示 到 页 面 上 。 

上 述 代码 使 用 了 supportSessionStorage() 函数 ， 该 函数 用 于 判断 当前 的 浏览 器 是 否 支持 
sessionStorage 对 象 ， 具 体 实现 代码 如 下 : 


function supportSessionStorage(){ /1/ 判断 当前 浏览 器 是 否 支持 sessionStorage 对 象 
try{ 
if(!llwindow.sessionStorage ) return window.sessionStorage; 
}catch(e){ 
return undefined; 
} 
} 


在 上 述 代 码 中 ， 如 果 浏 览 器 支持 sessionStorage 对 象 ， 那 么 全 局 对 象 window 上 会 有 一 个 
SessionStorage 属性 。 反 之 ， 如 果 浏 览 器 不 支持 该 特性 ， 那 么 该 属性 值 为 undefined。 

在 支持 sessionStorage 对 象 的 浏览 器 中 打开 页 面 ， 然 后 刷新 几 次 页 面 会 看 到 数字 的 变化 ， 
如 图 6-1 所 示 。 使 用 Chrome 浏览 器 可 以 查看 sessionStorage 对 象 中 存储 的 具体 数据 ， 方 法 是 
按 F12 键 打开 调试 控制 合 ， 然 后 在 Resources 分 类 下 展开 Session Storage 节点 ， 即 可 查看 当前 
会 话 中 所 有 数据 的 键 及 对 应 的 值 。 从 图 6-2 中 可 以 看 到 当前 存在 一 个 名 为 pagecount 的 键 ， 对 
应 的 值 是 8。 
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使 用 sessionStorage 对 象 | 


目 cche songe 


lsessionsrorage 对 象 通常 用 于 存储 与 用 户 有 关 的 数据 。 
刷新 当前 页 面 会 看 到 下 面 数字 的 变化 。 一 旦 页 面 关 闭 或 者 换个 浏览 器 都 会 重新 计数 。 


当前 页 面 访 问 量 : 8 


图 6-1 会 话 计数 器 效果 图 6-2 调试 控制 台 


和》6.1.3 localStorage 对 条 
使 用 sessionStorage 对 象 存储 的 数据 只 在 用 户 的 临时 会 话 中 有 效 ， 如 果 关 闭 浏览 器 ， 这 些 
数据 都 将 丢失 。 因 此 ， 如 果 需 要 长 期 在 客户 端 保存 数据 ， 不 建议 使 用 sessionStorage 对 象 ， 而 
是 使 用 localStorage 对 象 。 
localStorage 对 象 与 sessionStorage 对 象 具 有 相同 的 方法 ， 两 者 的 唯一 区 别 就 是 
localStorage 对 象 可 以 将 数据 长 期 保存 在 客户 端 ， 除 非 手动 将 其 清除 。 
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尽管 使 用 localStorage 对 象 可 以 将 数据 长 期 保存 在 客户 广 ， 但 在 跨 浏览 器 读 取 数据 时 ， 数 据 仍然 | 
| 不 可 共享 ， 即 每 一 个 浏览 器 只 能 读 取 各 自 浏览 器 中 保存 的 数据 ， 不 能 访问 其 他 浏览 器 中 保存 的 数据 。 | 
[ 例 6-2]】 
对 例 6-1 进行 修改 ， 使 用 localStorage 对 象 来 实现 可 以 跨 页 面 的 计数 器 功能 。 核 心 代码 
如 下 : 


if(supportlocalStorage()){ // 检测 是 否 支 持 localStorage 对 象 也 
if (localStorage.pagecount) // 判断 是 否 为 第 一 次 打开 
1 工 
var old_val = Number(localStorage.pagecount); /1/ 获取 当前 的 数字 一 
localStorage.pagecount= old_val+1; // 累加 后 进行 保存 三 
Jelse{ | 醒 
localStorage.pagecount=1; // 设置 初始 值 为 1 a 
} 9) 
var num = document.getElementByld('num'); (2p) 
num.innerText = localStorage.pagecount; // 在 页 面 显示 最 新 的 数字 (op 
} 当 
多 
supportlocalStorage() [LTS 全。 > 
函数 用 于 判断 当前 ¢ 3 C fley//D/HtmiSpace/code6/1/indexLhtml PY 
浏 览 是 否 否 支 人 c Cc EIDLILE: Sk (dp) 
0 
we pe 3 人 使 用 localStorage 对 象 es: 
supportSessionStorage() “| 使 用 localStorage 对 嫂 easeerage 对 晕 通 党 用 于 存储 与 过 户 喘 有 关 的 娄 据 * 攻 
函数 。 打 开 多 个 浏览 cascorage 对 旬 通 常用 于 存储 与 者 崩 有 新 当前 页 面 会 看 到 下 面 字 的 变化 页面 关 闭 计数 也 不 会 被 重 时 
窗口 刷新 页 面 会 发 现 计 
数 器 是 连续 变化 的 ， 这 
也 说 明 数 据 是 共享 的 ， 


如 图 6-3 所 示 。 


== 
a = 
localStorage 对 象 存储 的 数据 同样 可 以 在 Chrome 浏览 器 的 控制 台 查 看 ， 方 法 是 在 Resources 分 | 

\ 类 下 展开 Local Storage 节点 。 1 


9 6.2 操作 本 地 数据 


localStorage 对 象 和 sessionStorage 对 象 提供 了 相同 的 方法 来 进行 写 入 数据 、 读 取 数 据 以 
及 清空 数据 等 操作 。 本 节 以 localStorage 对 象 为 例 讲解 具体 操作 数据 的 实现 过 程 。 
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川 ) 6.2.1 保存 数据 


保存 数据 最 简单 的 方法 就 是 调用 localStorage 对 象 的 setItem() 方法 。 该 方法 的 语法 格式 
如 下 : 


localStorage.setltem(keyvalue) 


其 中 ，key 参数 表示 要 保存 数据 的 键 名 ，value 参数 表示 要 保存 数据 的 值 。 在 使 
setItem() 方法 保存 数据 时 对 应 格式 为 “ 键 名 , 键 值 ”。 一 旦 键 名 设置 成 功 ， 则 不 允许 修改 ; 
如 果 有 重复 的 键 名 ， 将 用 新 的 键 值 取代 原 有 的 键 值 。 

【 例 6-3】 

使 用 localStorage 对 象 的 setItem() 方法 实现 存储 设备 名 称 和 设备 型 号 ， 代 码 如 下 : 


var localStorage = supportlocalstorage(); 
if(localStorage){ 


localStorage.setltem("name"," 测试 设备 "); // 存储 设备 名 称 

localStorage.setltem("model"," 小 米 2s"); // 存储 设备 型 号 
jelse{ 

alert(" 浏览 器 不 支持 localStorage 对 象 "); 


} 


如 上 上段 代 码 所 示 ， 使 用 localStorage 对 象 的 setItem() 方法 ， 将 设备 名 称 通过 name 键 进行 
保存 ， 通 过 model 键 保 存 设备 型 号 。 如 图 6-4 所 示 为 保存 数据 成 功 后 的 效果 。 


民 0D | Hements Console Sources Network Timeline Profiles Resources Audits 


PO Fames Key | Value 
* 则 web sQL model 小 米 25 
| name 测试 设备 
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HindexedD8 
v 国 Local storage 


* 国 session Storage 
* 国 Cookies 
国 Application Cache 
HI Cache Storage 


图 6-4 保存 数据 
setItem() 方法 还 有 两 种 简化 的 形式 ， 同 样 是 使 用 name 键 保存 设备 名 称 数据 ， 等 价 代码 
如 下 : 


localStorage.name = " 测试 设备 "; // 使 用 对 象形 式 存储 设备 名 称 
localStorage["name"] = " 测试 设备 "; // 使 用 数组 形式 存储 设备 名 称 
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如 果 用 户 存 储 数 据 的 数量 已 经 达到 浏览 器 的 上 限 ， 浏 览 器 会 抛 出 一 个 QUOTA_ 
EXCEEDED ERR 异常 。 使 用 该 异常 的 示例 代码 如 下 : 


try 
{ 

localStorage.setltem("name"," 测试 设备 "); // 存储 设备 名 称 
}catch(e){ 

if(e == QUOTA_EXCEEDED_ERR){ 

alert(" 数量 超过 浏览 器 上 限 ， 保 存 失败 ! "); 

} 

} 


上 上 段 代码 在 保存 数据 时 如 果 发 生 QUOTA_EXCEEDED_ERR 异常 ， 将 会 弹出 对 话 框 提示 
存储 数量 超过 上 限 。 


咱 ) 6.2.2 读 取 数据 


使 用 setItem( 方法 保存 数据 后 ， 如 果 需 要 读 取 被 保存 的 数据 可 以 调用 localStorage 对 象 
的 getItem0) 方法 。 该 方法 的 语法 格式 如 下 : 


localStorage.getltem(key) 


其 中 ，key 参数 表示 要 读 取 数据 所 对 应 的 键 名 ， 该 方法 会 返回 一 个 key 键 名 对 应 的 键 值 ， 
如 果 键 名 不 存在 则 返回 一 个 null 值 。 

【 例 6-4] 

创建 一 个 实例 ， 实 现在 系统 后 全 的 首页 显示 用 户 在 登录 页 面 输入 的 账号 。 要 实现 这 个 功 
能 主要 有 两 个 步骤 ， 第 一 步 是 在 登录 页 面 保存 数据 ， 第 二 步 是 在 系统 后 全 首页 读 取 数 据 。 使 
用 localStorage 对 象 实现 的 主要 步骤 如 下 。 

大 入 新 建 一 个 HTML5 页 面 。 在 页 面 中 设计 一 个 用 于 输入 登录 账号 和 密码 的 表单 ， 本 示 
例 使 用 的 登录 表单 代码 如 下 : 
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<form action="mysuperscript.php" autocomplete="on"> 
<h1> 智能 考勤 系统 </h1> 
<p> 
<label for="username" class="uname" data-icon="u" > 账号 </label> 
<input id="username" name="username" required="required" type="text" placeholder=" 用 户 
名 或 者 邮箱 "/> 
</p> 
<p> 
<label for="password" class="youpasswd" data-icon="p"> 密码 </label> 
<input id="password" name="password" required="required" type="password" placeholder=" 
密码 "/> 
</p> 
<p class="keeplogin"> 


<input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /> 
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<label for="loginkeeping"> 记 住 </label> 
</p> 
<p class="login button "> 
<input type="button" value=" 登录 "onclick="btnlogin_click();"/> 
</p> 
</form> 


丰台 从 登录 表单 的 代码 可 以 看 出 ， 单 击 “ 登 录 ” 按 钮 会 执行 btnlogin_click() 函数 。 该 函 


区 数 实现 了 在 localStorage 对 象 中 保存 账号 的 功能 ， 实 现代 码 如 下 : 
function btnlogin_click(){ 

可 var username=$$("username").value; // 获取 账号 文本 框 内 容 

三 var password=$$("password").value; // 获取 密码 框 内 容 

局 var localStorage = supportlocalStorage(); // 判断 是 否 支持 localStorage 对 象 
+ if(localStorage){ 

(@) localStorage.setltem("username",username); // 保存 用 户 名 

0 localStorage.setltem("password",password); // 保存 密码 

0 alertf" 登 录 成 功 路 

十 Jelse{ 

ny alert(" 浏览 器 不 支持 localStorage 对 象 "); 

< } 

中 中 

JW) 

3 gg 打开 系统 后 台 页 面 ， 在 合适 位 置 添加 一 个 span 元 素 用 于 显示 登录 后 的 账号 。 本 示例 
S 中 的 代码 如 下 : 


<span id="username"></span> 


大 下 调用 getItem() 方法 从 localStorage 对 象 中 读 取 数据 并 显示 到 span 元 素 。 实 现代 码 
如 下 : 


window.onload=function(){ 


var localStorage = supportlocalStorage(); // 判断 是 否 支持 localStorage 对 象 
var username = localStorage.getltem("username"); // 获取 username 键 对 应 的 数据 
if(username==null) 
| 

alert(" 未 登录 ， 请 返回 登录 页 面 。"); 
}else{ 

$$("username").innerText = username; // 显示 到 页 面 
} 


} 


于 localStorage 对 象 中 不 存在 键 usemame 的 数据 ， 所 以 


如 果 用 户 直接 访问 当前 页 


甘 
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getltem("username") 会 返回 一 个 null， 此 时 提示 “未 登录 ， 请 返回 登录 页 面 ”。 反 之 ， 如 果 不 
为 null， 则 将 它 显示 到 页 面 。 

三 运行 登录 页 面 ， 输 入 账号 和 密码 ， 如 图 6-5 所 示 。 访 问 系统 后 人 台 首 页 查看 显示 效果 ， 
如 图 6-6 所 示 。 


中 Bis 可 
€ 3 G GB file///D/HtmlSpace/code6/2/index.html 


智能 考勤 系统 后 台 


© fileywDVHtmlspace/code6/2/loginhtml 


智能 考勤 系统 


他 7 规 届 卫衣 。 可 来 叶 贱 。 证 出 11223344@qq com 
| 工 122334@qqcom 
下 而 忆 前 位 置 >> 需 Ri 本 置 


上 午 上 开 抽 : 630 


下 午 上 再 和 间 : 


HA 60 
迫 过 上 班 多 少 分 拉 内 算 总 到 《时 认为 60 分 着》 


图 6-5 登录 页 面 图 6-6 系统 后 台 首页 


getItem() 方法 也 有 两 种 简化 的 形式 , 同样 是 读 取 usermame 键 对 应 的 数据 , 等 价 代 码 如 下 : 
var username = localStorage.username; // 使 用 对 象形 式 读 取 数 据 


var username = localStorage["username'"]; // 使 用 数组 形式 读 取 数 据 


叫 )》 6.2.3 清空 数据 


如 果 要 删除 某 个 键 名 对 应 的 数据 ， 只 需 调用 localStorage 对 象 的 removeItem() 方法 并 传递 
一 个 键 名 即 可 。 该 方法 的 语法 格式 如 下 : 


localStorage. removeltem(key); 
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如 果 要 删除 的 数据 比较 多 ， 使 用 removeItem0) 方法 逐条 删除 比较 麻烦 。 此 时 ， 可 以 调用 
localStorage 对 象 中 的 clear() 方法 ， 该 方法 的 功能 是 清空 全 部 localStorage 对 象 保存 的 数据 ， 
其 语法 格式 如 下 : 


localStorage.clear(); 


例如 ， 要 删除 例 6-4 中 保存 的 账号 数据 ， 实 现代 码 如 下 : 


var localStorage = supportlocalStorage(); 


localStorage.removeltem("username"); 


咱 ) 6.2.4 遍历 数据 

如 果 要 查看 localStorage 对 象 中 保存 的 所 有 数据 ， 则 需要 遍历 这 些 数据 。 这 需要 借助 于 
localStorage 对 象 的 两 个 属性 : length 和 key。 其 中 ，length 属性 可 以 获取 保存 数据 的 总 量 ; 
key 属性 可 以 获取 数据 的 键 名 ， 该 属性 常 与 索引 号 (index)〉 配 合 使 用 ， 表 示 第 几 条 键 名 对 应 
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的 数据 记录 。 其 中 ， 索 引号 以 0 值 开始 ， 如 果 取 第 二 条 键 名 对 应 的 数据 ，index 值 应 该 为 1。 
【 例 6-5】 
创建 一 个 实例 ， 实 现 每 次 刷新 页 面 时 都 会 在 当前 localStorage 对 象 中 存储 5 个 数据 ， 并 在 
页 面 上 显示 当前 数据 的 总 数 ， 以 及 每 个 数据 的 键 名 和 值 ， 还 可 以 一 键 清空 所 有 数据 ;主要 实 
现 步 骤 如 下 。 
大 中 新 建 一 个 HTML5 页 面 。 在 页 面 的 合适 位 置 添加 显示 数据 数量 的 span 元 素 ， 用 于 清 
空 操作 的 button 元 素 ， 以 及 用 于 显示 数据 列表 的 table 元 素 。 本 示例 使 用 的 代码 如 下 : 


<h1> 遍历 数据 </h1> 
<p> 当前 数据 总 量 : <span id="num"></span> <button onclick="clearData()"> 清除 所 有 </button></p> 
<p> 
<table align=center border=1 width="400px"> 
<tr> 
<th> 键 名 </th> 
<th> 键 值 </th> 
</tr> 
<tbody id="message"></tbody> 
</table> 
</p> 


四 允 在 页 面 加 载 完 成 后 显示 localStorage 中 存储 数据 的 总 数量 及 每 个 数据 的 内 容 。 实 现代 
码 如 下 : 


window.onload = function(){ 
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var localStorage = supportLocalStorage(); // 获取 localStorage 对 象 
if(localStorage){ 
initData(); // 初始 化 数据 
showData(); // 显示 数据 
} 


supportLocalStorage() 函数 会 返回 一 个 localStorage 对 象 ， 如 果 返 回 null 表示 浏览 器 不 支 
持 localStorage 对 象 。 

大 initData() 函数 可 以 实现 在 当前 的 localStorage 对 象 中 增加 5 个 数据 ， 具 体 实现 代码 
如 下 : 


function initData(){ 
for (vari= 1;i<= 5; it+){ 


var key = "index_"+RetRndNum(3); // 获取 一 个 随机 的 字符 串 作为 键 
var value = RetRndNum(8); // 获取 一 个 随机 的 数字 作为 数据 
localStorage.setltem(keyvalue); // 保存 数据 

} 
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如 上 述 代码 所 示 ，for 语句 共 循环 5 次 ， 每 次 都 会 获取 一 个 随机 的 字符 串 作 为 键 ， 并 将 随 
机 生成 的 数字 作为 数据 进行 保存 。 
加 三 生成 随机 数 的 RetRndNum() 函数 的 实现 代码 如 下 : 


// 生成 指定 长 度 的 随机 数 
function RetRndNum(n){ 
var strRnd=""; 
for(var intl=0;intl<n;intl++){ 
strRnd+=Math.floor(Math.random()*10); 


} 


return strRnd; 


} 


罗 晤 showData0 函数 的 作用 是 从 localStorage 对 象 读 取 所 有 的 数据 并 显示 ， 具 体 实现 代码 
如 下 : 


function showData(){ 
var count = localStorage.length; // 获取 数据 的 总 数量 
SS("num'").innerText = count; // 显示 到 页 面 的 span 元 系 中 


var strHTML = ""; 
for(var key_index=0;key_index<count;key_index++){ // 遍历 所 有 数据 
var strkey=localStorage.key(key_index); // 获取 数据 的 键 名 
var strval=localStorage.getltem(strkey); // 获取 数据 的 内 容 
strHTML+="<tr><td>"+strkey+"</td>"; 
strHTML+="<td>"+strval+"</td>"; 
strHTML+="</tr>"; 
} 
$$("message").innerHTML=strHTML; // 显示 到 页 面 的 table 元 票 中 
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如 上 述 代 码 所 示 ， 调 用 localStorage 对 象 的 length 属性 获取 数据 的 总 数量 ， 然 后 使 用 for 
循环 进行 遍历 ， 在 遍历 时 使 用 key() 方法 获取 当前 数据 的 键 值 ， 再 使 用 getItem() 方法 获取 该 
键 值 对 应 的 数据 ， 最 后 进行 字符 串 拼接 并 显示 到 页 面 上 。 

厅 单 击 “ 清 除 所 有 ”按钮 会 执行 clearData() 函数 ， 该 函数 的 实现 代码 如 下 : 


function clearData(){ 
localStorage.clear(); // 清空 localstorage 对 象 的 所 有 数据 
showDatal(); // 更 新 页 面 

} 


如 上 述 代 码 所 示 ， 先 调用 localStorage 对 象 的 clear0) 方法 清空 所 有 数据 ， 再 调 
showData() 函数 更 新 页 面 。 
轩 W 在 浏览 器 中 打开 页 面 ， 第 一 次 打开 时 会 在 表格 中 显示 5 条 数据 的 键 名 和 键 值 ， 如 
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图 6-7 所 示 。 这 些 数据 在 控制 台中 的 效果 如 图 6-8 所 示 。 以 后 每 刷新 一 次 页 面 都 会 增加 5 条 数据 。 
如 果 单 击 “ 清 除 所 有 ”按钮 ， 表 格 将 被 清空 。 


HTML 5 教程 大 全 
D 人 民 0D | Bements Console Sources Network Resources » 


€ SC Dfile///D/HtmlSpace/code6/3/index PO Frames Key valu ES 
* HwebsQL index 025 
本 InderedDs index_243 。 |15671659 


index_418 99605493 


Y 国 Local storage index_505 。 | 69668429 


index 834 。 | 20036826 
* 国 Session Storage 
* 国 Cookies 
国 Application Cache 
Hl cache Storage 


index_025 15002619 


index_243 15671659 


index_418 99605493 


index_505 69668429 


index_834 20036826 


ed ， 
图 6-7 表格 显示 所 有 数据 图 6-8 控制 台 显示 所 有 数据 


9 6.3 ”实践 案例 :实现 工程 管理 模块 


在 本 节 之 前 介绍 的 方法 只 能 在 localStorage 对 象 中 存储 简单 类 型 的 数据 ， 如 数字 或 者 字符 
串 。 为 了 处 理 相对 复杂 的 数据 结构 ， 在 HIML5 中 可 以 通过 localStorage 数据 与 JSON 对 象 的 
转换 ， 快 速 实现 存储 更 多 数据 的 功能 。 

如 果 要 将 字符 串 数据 转换 为 JSON 对 象 ， 需 要 调用 JSON 对 象 的 parse() 方法 ， 该 方法 的 
语法 格式 如 下 : 

JSON.parse(data) 

其 中 ，data 参数 表示 要 转换 的 数据 ， 通 常 是 从 localStorage 对 象 中 读 取 的 数据 。 该 方法 会 
返回 一 个 表示 data 数据 的 JSON 对 象 。 

通过 stringify0 方法 可 以 将 一 个 实体 对 象 转换 为 JSON 格式 的 文本 数据 ， 该 方法 的 语法 格 
式 如 下 : 
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JSON.stringify(obj) 
其 中 ，obj 参数 表示 一 个 任意 的 实体 对 象 ， 调 用 该 方法 将 返回 一 个 由 实体 对 象 转换 成 
JSON 格式 的 字符 串 。 


下 面 就 结合 上 面 两 个 方法 实现 一 个 简单 的 工程 管理 模块 ， 主 要 功能 包括 添加 工程 、 查 看 
工程 列表 和 删除 工程 。 每 个 工程 包含 的 字段 有 工程 编号 、 工 程 名 称 、 占 地 面积 、 负 责 人 和 状态 
主要 实现 步骤 如 下 。 

I@ 及 新建 一 个 HTML5 页 面 ， 并 在 合适 位 置 根据 工程 的 字段 制作 一 个 表单 。 本 案例 使 用 
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的 表单 代码 如 下 : 


<form class="form-horizontal" action="#" method="get" > 
<div class="form-group"> 
<label class="col-sm-2 col-sm-offset-2 control-label"> 工程 编号 </label> 


<div class="col-sm-6"> 


<input type="text" class="form-control" 
</div> 


</div> 


"loc_id"> 


<div class="form-group"> 
<label class="col-sm-2 col-sm-offset-2 control-label"> 工程 名 称 </label> 


<div class="col-sm-6"> 


<input type="text" class="form-control" id="loc_name"> 
</div> 

</div> 

<div class="form-group"> 


<label class="col-sm-2 col-sm-offset-2 control-label"> 占 地 面积 </label> 


<div class="col-sm-6"> 
<input type="number" class="form-control" value="20" id="loc_path"> 
</div> 
</div> 
<div class="form-group"> 
<label class="col-sm-2 col-sm-offset-2 control-label"> 负责 人 </label> 


<div class="col-sm-6"> 
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<input type="text" class="form-control" id="loc_person"> 


</div> 


1d 


</div> 
<div class="form-group"> 
<label class="col-sm-2 col-sm-offset-2 control-label"> 状态 </label> 


<div class="col-sm-6"> 


<select 
<option value=" 未 开工 "> 未 开工 </option> 
<option value=" 监测 中 "> 监测 中 </option> 
<option value=" 故障 中 "> 故障 中 </option> 


</select> 


"loc_state" class="form-control"> 


</div> 
</div> 
<div class="form-group"> 
<label class="col-sm-2 col-sm-offset-2 control-label"> </label> 
<div class="col-sm-6"> 
<button type="button" onclick="saveData()" class="btn btn-primary btn-block btn-md"> 
确定 </button> 


</div> 
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</div> 


</form> 


上 述 表单 的 最 终 效果 如 图 6-9 所 示 。 


€ 3 C [0 file///D/HtmlSpace/code6/anli/index.html 


6 > 治 污 减 者 网 格 化 管理 信息 平台 @ 欢迎 你 ，admin [(@) | 


添加 /修改 


2017050101 


安 专 园 和 # 


图 6-9 录入 工程 信息 
困 加 在 添加 工程 的 表单 中 单 击 “确定 " 按钮 会 执行 saveData0 函数 ， 该 函数 收集 用 户 在 
表单 中 输入 的 信息 ， 然 后 添加 到 当前 的 localStorage 对 象 中 ， 再 加 载 最 新 的 数据 。 该 函数 的 实 
现代 码 如 下 : 
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var localStorage = supportlocalStorage(); 


function saveData(){ // 保存 工程 信息 
var id=$("#loc_id").val(); // 获取 工程 编号 
var name=$("#loc_name").val(); // 获取 工程 名 称 
var path=$("#loc_path").val(); // 获取 占 地 面积 
var person=$("#loc_person").val(); // 获取 工程 负责 人 
var state=$("#loc_state").val(); // 获取 工程 状态 


// 封装 成 一 个 Javascript 数据 对 象 
var new_data ={ 

id:id, 

name:name, 

path:path, 

person:person, 


state:state 


a 


var loc_data_str = localStorage.getltem("loc_data"); // 获取 原来 的 数据 


var ret = []; 
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if(loc_data_str == null){ // 如 果 为 null， 表 示 第 一 次 执行 
ret = [new_data]; // 把 数据 对 象 放 到 数组 中 

}else{ 
ret = JSON.parsel(loc_data_str); // 把 数据 转换 成 Javascript 数组 
ret.push(new_data); // 向 数组 中 追加 新 的 数据 对 象 

} 

var ret_str = JSON .stringify(ret); // 把 数组 转换 成 字符 串 

localStorage.setltem('loc_data',ret_str); // 把 字符 串 保存 到 localstorage 对 象 

showData(); // 加 载 最 新 的 数据 


1 


如 上 述 代 码 所 示 ， 在 保存 时 需要 做 多 种 工作 ， 第 一 步 是 获取 用 户 输 入 的 数据 ， 第 二 步 是 
将 数据 封装 成 一 个 JavaScript 对 象 ， 第 三 步 是 把 JavaScript 对 象 保 存 到 当前 的 localStorage 对 
象 中 ， 第 四 步 是 重新 加 载 最 新 的 数据 列表 。 

其 中 ， 第 三 步 是 核心 步骤 ， 它 会 从 当前 的 localStorage 对 象 中 获取 loc_data 键 对 应 的 数 
据 ， 如 果 是 第 一 次 添加 ， 由 于 之 前 还 没有 保存 过 ， 所 以 会 获取 一 个 null 值 ， 此 时 会 将 封装 
好 的 JavaScript 数据 对 象 放 到 数组 中 。 反 之 ， 如 果 不 是 null， 则 会 调用 JSON 的 parse() 方法 
将 表示 工程 列表 的 字符 串 转 换 成 JavaScript 数组 ， 再 向 数组 中 添加 当前 的 数据 对 象 。 接 着 调 
用 JSON 的 stringify() 方法 将 数组 转换 成 字符 串 ， 再 重新 保存 到 localStorage 对 象 的 loc_data 
键 中 。 

大 吕 在 页 面 的 合适 位 置 添加 一 个 table 元 素 用 于 显示 工程 列表 。 本 案例 中 的 代码 如 下 : 


<table class="table table-striped text-center"> 
<thead> 
<tr> 
<th> 工程 编号 </th> 
<th> 工程 名 称 </th> 
<th> 占 地 面积 </th> 
<th> 负责 人 </th> 
<th> 状态 </th> 
<th> 操作 </th> 
</tr> 
</thead> 
<tbody id="data-body"> </tbody> 
</table> 
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攻 副 showData() 函数 可 以 实现 从 当前 localStorage 对 象 中 读 取 数 据 并 显示 到 table 元 素 ， 
具体 实现 代码 如 下 : 


function showDatal(){ 
var loc_data_str = localStorage.getltem("loc_data"); // 获取 工程 列表 字符 串 


if(loc_data_str != null){ 
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var ret = JSON.parsel(loc_data_str); // 转换 成 数组 


Var strHTML = ” 


for(index in ret){ // 遍历 数组 
var loc=ret[index]; /1/ 从 数组 中 获取 一 个 数据 对 象 
strHTML+="<tr><td>"+loc.id+"</td>"; // 工程 编号 
strHTML+="<td>"+loc.name+"</td>"; // 工程 名 称 
strHTML+="<td>"+loc.path+"</td>"; // 占 地 面积 
strHTML+="<td>"+loc.person+"</td>"; // 工程 负责 人 
strHTML+="<td>"+loc.statet+"</td>"; // 工程 状态 


strHTML+='<td><i class="fa fa-trash" onclick="del('+loc.id+")"></i></td>'; // 操作 按钮 
strHTML+="</tr>"; 


| 
$("#data-body").html(strHTML); // 显示 到 页 面 的 table 元 又 中 


1 


上 述 代码 将 数据 转换 成 数组 之 后 使 用 for 语句 进行 遍历 ， 在 遍历 时 将 每 一 个 工程 属性 组 
成 一 个 字符 串 ， 最 后 显示 到 table 元 素 中 。 

因 吕 在 当前 页 面 中 添加 两 个 工程 信息 ， 此 时 的 工程 列表 如 图 6-10 所 示 。 所 有 的 工程 信息 其 
实 都 保存 在 键 为 loc_data 的 localStorage 对 象 中 ， 如 图 6-11 所 示 为 此 时 该 键 所 对 应 的 内 容 。 由 于 
localStorage 对 象 中 只 能 存储 字符 串 ， 因 此 在 显示 和 存储 时 需要 在 JSON 和 字符 串 之 间 进 行 转 换 。 


EC x 
和 3 © [fle///D/HtmlSpace/codeG/anli/index html 


， 浙 生 后 划 ， 所 有 工程 


图 6-10 查看 工程 列表 图 6-11 查看 工程 列表 对 应 的 数据 字符 囊 

困 在 图 6-10 所 示 的 工程 列表 中 如 果 单 击 “ 操 作 ” 列 下 对 应 的 荔 按 钮 ， 可 以 删除 当前 的 
工程 。 该 按钮 对 应 的 是 del0 函数 ， 具 体 实现 代码 如 下 : 

function del(id){ // 删除 id 参数 指定 的 工程 数据 


var loc_data_str = localStorage.getltem("loc_data"); // 获取 工程 列表 字符 串 
if(loc_data_str != null){ 
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var ret = JSON.parse(loc_data_str); // 转换 成 数组 
for(index in ret){ /1/ 遍历 所 有 数据 
var loc=ret[index]; // 从 数组 中 获取 一 个 数据 对 象 
if(id == loc.id){ // 如 果 当 前 对 象 的 编号 是 要 删除 的 编号 
ret.splice(index, 1); /1/ 从 数组 中 移 除 当前 数据 
break; 
} 
} 
var ret_str = JSON .stringify(ret); // 把 数组 转换 成 字符 串 
localStorage.setltem('loc_data',ret_str); // 把 字符 串 保存 到 localstorage 对 象 
showDatal(); // 加 载 最 新 的 数据 


外 7)) 6.4 操作 本 地 数据 库 数据 


在 HIML4 以 及 之 前 的 版 本 中 ， 数 据 库 只 能 存放 在 服务 器 端 ， 再 通过 服务 器 端 语言 来 访 
问 数据 库 。 但 是 在 HIML5 中 ， 可 以 像 本 地 文件 那样 轻松 地 对 内 置 数据 库 进行 直接 访问 。 

HIMLS 中 的 本 地 数据 库 全 称 是 Web SQL DataBase， 它 提供 了 关系 数据 库 的 基本 功能 ， 
可 以 存储 页 面 中 交互 的 复杂 的 数据 。 它 通过 事务 驱动 实现 对 数据 的 管理 ， 既 可 以 保存 数据 ， 
也 能 缓存 从 服务 器 获取 的 数据 。 


咱 ) 6.4.1 创建 数据 库 


与 客户 端 数据 存储 相 比 ，HIMLS 本 地 数据 库 具有 以 下 优势 。 

e@ 可 以 自 定义 要 设置 的 存储 空间 。 

@ 可 以 跨 域 访问 。 

e@ 存储 结构 更 加 自由 。 

e@ 可 以 方便 地 使 用 Web SQL 对 数据 进行 读 写 。 

要 通过 HIMLS 本 地 数据 库存 储 数 据 ， 第 一 步 就 是 创建 或 打开 一 个 数据 库 。 这 需要 调 
openDatabase() 方法 ， 该 方法 的 语法 格式 如 下 : 


openDatabase(DBName,DBVersion,DBDescribe,DBSize,Callback()); 
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其 中 ， 各 个 参数 的 含义 如 下 。 

e DBName 表示 数据 库 名 称 。 

DBVersion ”表示 版 本 号 。 

DBDescribe 表示 对 数据 库 的 描述 。 

DBSize 表示 数据 库 的 大 小 ， 单 位 为 字 节 。 如 果 是 2MB， 必 须 写成 2*1024*1024。 
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e Callback() 表示 创建 或 打开 数据 库 成 功 后 执行 的 一 个 回调 函数 。 

调用 openDatabase() 方法 后 如 果 指 定名 称 的 数据 库存 在 ， 则 打开 该 数据 库 ， 否 则 创建 一 
个 指定 名 称 的 空 数据 库 。 

例如 ， 下 面 的 示例 代码 演示 了 如 何 调用 openDatabase() 方法 创建 一 个 数据 库 。 


function CreateDatabase(){ 
var db; 
db=openDatabase('studentDB','2.0','stumanager',2*1024*1024,); 
function(){ 
alert(" 数据 库 创建 成 功 "); 
ua 
} 


上 述 代 码 创 建 了 一 个 名 为 studentDB， 版 本 号 为 2.0 的 2MB 数据 库 对 象 ， 如 果 创 建成 功 
则 执行 回调 函数 ， 并 在 回调 函数 中 显示 执行 成 功 的 提示 信息 。 


咱 ) 6.4.2 执行 SQL 语句 

创建 或 打开 数据 库 之 后 ， 就 可 以 使 用 数据 库 对 象 中 的 transaction() 方法 执行 事务 处 理 。 
每 一 个 事务 处 理 请 求 都 作为 数据 库 的 独立 操作 ， 可 以 有 效 地 避免 在 处 理 数 据 时 发 生 冲 突 。 其 
调用 的 语法 格式 如 下 : 


transaction(TransCallback, ErrorCallback,SuccessCallback); 


其 中 ， 各 个 参数 的 含义 如 下 。 

@ TransCallback 表示 事务 回调 函数 ， 可 以 写 入 需要 执行 的 SQL 语句 。 

@ ErrorCallback 表示 执行 SQL 语句 出 错时 的 回调 函数 ， 可 选 参数 。 

@ SuccessCallback 表示 执行 SQL 语句 成 功 时 的 回调 函数 ， 可 选 参数 。 

【 例 6-6】 

在 上 节 创 建 的 studentDB 数据 库 中 添加 一 个 student 表 ， 然 后 在 表 中 插入 两 行 数据 。 主 要 
实现 代码 如 下 : 
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if(db){ 

var sql="create table if not exists student"; // 创建 student 表 的 SQL 语句 

sql+="(id unique,name text,age int,score int)"; 

db.transaction(function(tx){ // 执行 SQL 语句 
tx.executeSql(sql) 

}» 

function(){ // 执行 失败 时 执行 此 函数 
document.write("student 表 创建 失败 <br/>"); 

}» 

function(){ // 执行 成 功 时 执行 此 函数 


document.write("student 表 创 建成 功 <br/>"); 
); 
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上 述 代 码 中 ，db 为 打开 的 studentDB 数据 库 对 象 ， 然 后 定义 一 个 SQL 语句 ， 该 语句 的 功 
能 是 : 如 果 不 存在 student 表 则 新 建 它 。student 表 包 含 4 个 字段 : id、name、age 和 score。 其 


中 ， 字 段 id 为 主键 ， 不 允许 奸 


E 复 ，name 字段 为 字符 型 ，age 和 score 字段 为 nt 类 型 。 最 后 调 


用 transaction() 方法 打开 一 个 事务 并 通过 executeSql0 方法 执行 SQL 语句 ， 再 把 执行 结果 输出 


到 页 画 


executeSql() 方法 的 语法 格式 如 下 : 


executeSql(sqlString,[Arguments],SuccessCallback,ErrorCallback); 


其 中 ，sqlString 参数 表示 需要 执行 的 SQL 语句 ，Arguments 参数 表示 语句 需要 的 实 参 ， 
SuccessCallback 参数 表示 SQL 语句 执行 成 功 时 的 回调 函数 ，ErrorCallback 参数 表示 SQL 语 


句 执行 出 错时 的 回调 函数 。 


下 面 的 语句 使 用 executeSql() 方法 执行 NSERT 语句 ， 在 student 表 中 插入 一 行 数据 。 


db.transaction(function(tx){ 
var sql='insert into student values(1," 张强 ",15,90);'; 


document.write(" 成 功 向 student 表 插入 一 条 数据 <br/>"); 


tx.executeSql(sql); 


); 


在 上 述 代 码 中 仅 指定 了 executeSql0 方法 的 第 一 个 参数 ， 忽 略 了 其 他 3 个 参数 。 
下 面 的 语句 是 在 eXecuteSql() 方法 中 使 用 形 参 占 位 符 来 向 student 表 插入 一 行 数据 。 


var sql="insert into student values(?,?,3,3)"; 


var id=2; 


var name=" 李 好 "; 


var age=21; 


Var score=82; 


tx.executeSql(sql,[id,name,age,score]); 


document.write(" 成 功 向 student 表 插入 一 条 数据 <br/>"); 


使 用 这 种 形式 要 注意 ， 形 
参 “? ”的 数量 必须 与 后 面 的 
实 参 数量 完全 对 应 。 如 果 SQL 
语句 中 没有 “? ” 形 参 ， 则 第 
二 个 参数 必须 为 空 ， 否 则 执行 
SQL 语句 时 将 会 报错 。 


将 上 述 代码 保存 在 一 个 文 


件 中 。 在 浏览 器 中 打开 查看 效 
果 ， 页 面 会 输出 4 行 提示 信息 。 
在 控制 台中 可 以 查看 当前 的 数 


据 库 名 称 、 数 据 


库 表 名 称 以 及 


表 数 据 ， 如 图 6-12 所 示 。 


表 创 建成 功 
成 功 向 student 表 插入 一 条 数据 
成 功 向 student 表 插入 一 条 数据 
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插入 数据 后 的 效果 
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909) 6.5 ”实践 案例 : 查看 学 生 列表 


上 节 介 绍 了 在 创建 的 本 地 数据 库 中 执行 SQL 语句 的 方法 ， 其 实 就 是 先 调 用 transaction() 
方法 开启 一 个 事务 ， 再 调用 executeSql0 方法 执行 SQL 语句 。executeSql( 方法 除了 可 以 执行 
数据 更 新 语句 之 外 ， 还 可 以 执行 查询 语句 。 

本 次 案例 实现 了 查询 student 表 中 所 有 学 生 数 据 并 显示 到 页 面 上 的 功能 ， 主 要 实现 步骤 如 下 。 

贴吧 在 页 面 合适 位 置 使 用 table 元 素 制作 一 个 显示 学 生 列表 的 表格 。 代 码 如 下 : 


<table align="center "border=1 width="500px"> 
<tr> 
<th> 学 号 </th> 
<th> 姓名 </th> 
<th> 年 龄 </th> 
<th> 成 绩 </th> 
</tr> 
<tbody id="message"></tbody> 
</table> 


而 台 在 页 面 中 添加 6.4.2 节 的 代码 ， 即 最 终 要 求 student 表 中 有 数据 。 
8 使 用 SELECT 语句 查询 student 表 ， 并 将 查询 结果 集中 的 数据 显示 到 页 面 。 实 现代 码 
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如 下 : 
if(db){ 
var sql="select * from student"; // 准备 查询 语句 
db.transaction(function(tx){ 
tx.executeSql(sql,[], // 执行 查询 
function(tx,result){ // 执行 成 功 ， 处 理 查询 结果 集 
var strHtml =""; 
for(var index=0;index<result.rows.length;index++)// 遍历 结果 集 
{ 
var row=result.rows[index]; // 从 结果 集中 取出 一 行 
strHtml+="<tr><td>"+row.id+"</td>"; // 编号 
strHtml+="<td>"+row.name+"</td>"; // 姓名 
strHtml+="<td>"+row.age+"</td>"; // 年 龄 
strHtml+="<td>"+row.score+"</td>"; // 成 绩 


strHtml+="</tr>"; 


D 
$$("message").innerHTML=strHtml; // 显示 到 页 面 

} 

function(tx,ex){ // 执行 失败 ， 显 示 错 误 信 息 
alert(" 发 生 错误 ， 描 述 : "+ex.message); 
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} 


上 述 语句 调用 了 executeSql( 方法 的 完整 形式 ， 
第 三 个 参数 是 执行 成 功 后 处 理 结果 集 的 回调 函数 ， 第 四 个 参数 是 


没有 形 参 第 二 个 参数 为 空 ， 
执行 失败 时 的 回调 函数 。 
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第 一 个 参数 是 SELECT 查询 语句 ， 由 于 


这 里 重点 是 第 三 个 参数 的 回调 函数 ， 如 果 执 行 成 功 则 在 该 回调 函数 中 会 有 一 个 表示 结果 集 


的 result 参数 。 结 果 集 的 rows 属性 是 一 个 数组 ， 
再 使 用 for 语句 遍历 每 一 个 元 素 。 最 后 将 遍历 后 的 字符 串 


取 数 组 的 长 度 〈 即 结果 集中 的 行 数 ) ， 
显示 到 页 面 上 。 


里 面 保存 的 是 所 有 的 结果 。 通 过 rows.length 获 


大 只 保存 上 述 代码 对 页 面 的 
修改 。 在 浏览 器 上 运行 页 面 ， 最 < 
终 效 果 如 图 6-13 所 示 。 在 此 案例 
的 基础 上 还 可 以 实现 学 生 信息 的 
删除 和 查询 功能 ， 读 者 可 以 自己 
完成 ， 这 里 不 再 介绍 。 


hrm smex= 


x 和 
© | © file///E/HtmlSpace/code6/anli2/index.html 
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97 6.6 练习 题 


一 、 填 空 题 
. Web Storage 分 为 sessionStorage 和 
. 当 用 户 关闭 浏览 器 窗口 后 ， 


图 6-13 查看 学 生 列表 


两 种 。 


对 象 存储 的 数据 会 丢失 。 


方法 。 


方法 返回 一 个 由 实体 对 象 转换 成 的 JSON 格式 的 文本 数据 。 


1 

2 

3， 如 果 要 删除 localStorage 对 象 的 全 部 数据 ， 可 以 使 用 
要 


本 地 数据 库 执行 SQL 语句 主要 使 用 


二 、 选 择 题 


.Web 存储 和 Cookie 存储 的 区 别 ， 下 列 选项 中 


方法 。 


是 正确 的 。 


.Web 存储 中 每 个 域 的 存储 大 小 默认 是 


.Web 存储 和 Cookie 存储 的 大 小 都 不 受 限 制 ， 可 以 任意 使 用 
5MB， 比 Cookie 的 4KB 要 大 得 多 


A 
B 
人 
D 
2 
的 写法 是 正确 的 。 
A. 

B 


Cookie 的 安全 性 非常 高 ，Web 存储 的 安全 性 很 低 
. Web 存储 和 Cookie 存储 没有 多 大 的 区 别 ， 
.假设 要 使 用 sessionStorage 对 象 写 入 键 名 name， 键 值 是 “ 陈 汉 虎 ” 的 数据 ， 下 面 


它们 之 间 可 以 相互 代替 


sessionStorage.setItem("name"," 陈 汉 虎 ") 
.localStorage.setItem("name"," 陈 汉 虎 ") 
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。 sessionStorage.getItem(" 陈 汉 虎 ") 
.SessionStorage.setItem(" 陈 汉 虎 ","name") 
.下列 属 于 JSON 方法 的 是 
.pause() 方法 和 stringify() 方法 
.pause() 方法 和 parse() 方法 
.parse() 方法 和 getItem() 方法 
.parse() 方法 和 stringify() 方法 
下 面 代码 中 ， 打 开 和 创建 本 地 数据 库 的 是 。 
。context.arc(100.100.75,0,Math.PI*2.FALSE): 
. Var db=openDatabase('db','1 .0','first database',2*1024*1024):; 
. tx.executeSql(CREATE TABLE tweets(id,date.tweeb): 
.以 上 都 不 正确 
关于 本 地 数据 库 ， 下 列 选项 的 说 法 是 错误 的 。 
.executeSql 方法 的 第 一 个 参数 指 执行 的 SQL 语句 ， 第 二 个 参数 指 SQL 语句 中 传 入 的 
参数 ， 多 个 参数 之 间 用 逗号 分 隔 
B. openDatabase() 方法 创建 或 者 打开 一 个 数据 库 ， 如 果 数 据 库 不 存在 ， 则 创建 数据 库 
C. parse() 方法 可 以 将 localStorage 数据 转换 为 SON 对 象 
D. stringify() 方法 可 以 将 一 个 实体 对 象 转换 为 JSON 格式 的 文本 数据 


< 上 机 练习 : 实现 基于 数据 库 的 收藏 夹 管理 


在 6.3 节 通 过 localStorage 对 象 和 JSON 实现 了 一 个 简单 的 工程 管理 模块 。 在 学 习 了 
HTMLS 本 地 数据 库 的 知识 之 后 ， 本 次 上 机 要 求实 现 一 个 带 数据 库 的 收藏 管理 模块 ， 包 括 查 
看 收藏 夹 列表 ， 以 及 收藏 网 站 的 添加 、 修 改 和 删除 。 最 终 运行 效果 如 图 6-14 所 示 。 


> oNHrFIONWHPHON 
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第 7 章 
文件 和 离线 应 用 


HTML5 越 来 越 受 到 人 们 的 重视 与 青睐, 其 中 最 大 的 原因 就 是 HTML4 的 诸多 局 限 在 HTML5 
中 得 到 了 很 大 程度 的 改善 ， 同 时 增加 了 很 多 实用 的 新 特性 。 

本 章 将 从 文件 和 离线 两 个 方面 展开 对 HTML5 新 特性 的 讲解 , 主要 包括 允许 选择 多 个 文件 、 
读 取 文件 的 信息 和 内 容 、 实 现 文件 上 传 以 及 判断 是 否 在 线 等 。 


昌 掌握 使 用 file 对 象 读 取 文件 信息 的 方法 

@ 熟悉 限制 文件 类 型 的 实现 方式 

”掌握 FileReader 接口 读 取 文 件 内 容 的 方法 

@ 了 解 FileReader 接口 中 与 文件 读 取 有 关 的 事件 
加 了 解 FileError 接口 的 错误 编码 

加 了 解 HTMLS5 的 离线 缓存 

@ 了 解 manifest 文件 的 作用 


HTMLS+CS53+ Javascript 网 页 设计 入 门 与 应 用 
”Se 
Q7]) 7.1 操作 文件 

与 HTML4 一 样 ，HTMLS 同样 可 以 使 用 fle 类 型 来 创建 文件 域 。 不 同 的 是 ，HTML5 多 


许 在 文件 域 中 选择 多 个 文件 ， 每 个 文件 为 一 个 file 对 象 。File 对 象 封装 了 本 地 对 文件 的 简单 
处 理 ， 下 面 详 细 介绍 该 对 象 的 使 用 。 


咱 》7.1.1 获取 文件 信息 


在 HTML5 中 ， 创 建文 件 域 的 具体 方法 是 在 form 内 创建 一 个 类 型 为 file 的 input 元 素 ， 
然后 运行 即 可 。 浏 览 器 会 自动 识别 并 创建 相应 的 浏览 vt 

在 file 类 型 中 选择 的 文件 其 实 是 一 个 File 对 象 。File 对 象 有 以 下 4 个 属性 。 

e name 属性 ”表示 选中 文件 不 带路 径 的 名 称 。 

e size 属性 ”使 用 字 节 表示 的 文件 大 小 。 

e@ type 属性 ”使 用 MIME 表示 的 文件 类 型 。 

e lastModifiledDate 属性 ”表示 文件 的 最 后 修改 日 期 。 

e multiple 属性 ”表示 是 否 人 允许 同时 选择 多 个 文件 ， 默 认 值 为 false。 

【 例 7-1】 

创建 一 个 示例 ,使 用 HTML5 的 File 对 象 获取 用 户 选择 文件 的 名 称 、 大 小 、 类 型 和 修改 日 期 。 

园 友 创建 一 个 表单 ， 并 将 File 对 象 的 multiple 属性 设置 为 true, 使 用 户 可 以 选择 多 个 文件 。 
代码 如 下 : 


<h2 style="font-size:18px;"> 附件 上 传 </h2> 
<form id="form1"> 
选择 文件 
<input type="file" id="iptFile" multiple="true" /> 
<input type="button" value=" 确定 " onclick="selectedFiles()" /> 
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</form> 


四 加 在 上 传 表单 的 下 方 添 加 一 个 表格 显示 最 终结 果 ， 代 码 如 下 : 


<table width="100%" cellspacing="1" cellpadding="1" border="1" class="mytable"> 
<tr> 
<th> 文件 名 称 </th> 
<th> 文件 大 小 </th> 
<th> 文件 类 型 </th> 
<th> 上 次 修改 日 期 </th> 
</tr> 
<tbody id="bodyFiles"> 
</tbody> 
</table> 


大 名 现在 运行 示例 ， 即 可 在 弹出 的 对 话 框 中 选择 多 个 文件 。 如 图 7-1 所 示 为 选中 多 个 文 
件 时 的 预览 效果 。 
大 到 为 了 实现 在 单 击 “确定 ”按钮 后 显示 这 些 文件 的 信息 ， 还 需要 编写 selectedFiles() 函 
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数 ， 具 体 实现 代码 如 下 : 


function selectedFiles() 
{ 
var result=$("bodyFiles"); 
var selectedFiles = $("iptFile").files; 
for(var i=0;i<selectedFiles.length;i++) // 遍历 选中 的 多 个 文件 
{ 
var aFile=selectedFiles[i]; 
Var str="<tr><td>"+aFile.name+"</td><td>" 
+aFile.size+" 字 节 </td><td>"+aFile.type+"</td><td>" 
+aFile.lastModifiedDate+"</td></tr>"; 
result.innerHTML+=str; 


} 


当 使 用 multiple 属性 后 ， 用 户 选择 的 多 个 文件 实际 上 保存 在 一 个 files 数组 中 ， 其 中 的 
个 元 素 都 是 一 个 File 对 象 。 因 此 ， 为 了 获取 每 个 文件 的 信息 需要 对 files 数组 进行 遍历 ， 再 
个 获取 文件 名 称 、 大 小 、 类 型 和 修改 日 期 。 代 码 运行 效果 如 图 7-2 所 示 。 


这 只 
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图 7-1 选中 多 个 文件 的 效果 图 7-2 显示 多 个 文件 信息 的 效果 


叫 )》 7.1.2 ”限制 文件 类 型 

通过 上 节 的 学 习 ， 我 们 知道 使 用 File 对 象 的 type 属性 可 以 获取 文件 的 类 型 。 根 据 这 个 特 
性 ， 我 们 可 以 在 JavaScript 中 判断 用 户 选择 的 文件 是 否 为 特定 类 型 ， 从 而 实现 对 文件 类 型 进 
行 限 制 的 功能 。 

0 入 选择 多 个 文件 后 ， 遍 历 每 一 个 File 对 象 ， 获 取 对 象 的 类 型 。 

四 罗 将 获取 的 对 象 类 型 与 设置 的 过 滤 类 型 进行 匹配 。 

0B 如 果 不 匹 配 ， 则 提示 上 传 文件 类 型 出 错 或 拒绝 上 传 等 信息 ， 从 而 实现 对 上 传 文件 的 
类 型 进行 过 滤 的 功能 。 

0 允 如 果 匹 配 ， 则 可 成 功 上 传 。 

【 例 7-2] 

下 面 对 7.1.1 节 的 selectedFiles( 函数 进行 修改 ， 增 加 判断 文件 类 型 的 功能 ， 使 用 户 只 能 
上 传 图 片 类 型 的 文件 。 修 改 后 的 函数 代码 如 下 : 
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function selectedFiles() 
var result=$("bodyFiles"); 
var selectedFiles = $("iptFile").files; 


var errnum=0; 


for(var i=0;i<selectedFiles.length;i++) // 遍历 选中 的 多 个 文件 
{ 
var aFile=selectedFiles[i]; 
if(l/imageV\w+/.test(aFile.type)) // 判断 类 型 是 否 匹配 
{ 
errnum++; 
console.log(aFile.name+" 不 是 合法 的 图 片 文件 ， 不 能 上 传 。"); // 输出 不 合法 文件 
continue; 


var str="<tr><td>"+aFile.name+"</td><td>" 
+aFile.size+" 字 节 </td><td>"+aFile.type+"</td><td>" 
+aFile.lastModifiedDate+"</td></tr>"; 
result.innerHTML+=str; 


} 
console.log(" 本 次 一 共 选 择 "+selectedFiles.length+" 个 文件 ， 其 中 "+errnum+" 个 文件 不 是 图 片 。") 


} 
这 里 主要 是 通过 判断 type 属性 的 值 


是 否 以 “image/” 开 头 来 区 分 图 片 类 型 。 
现在 运行 程序 仍然 可 以 在 对 话 框 中 选择 
任何 类 型 的 文件 。 单 击 “ 确 定 ” 按 钮 将 
会 对 文件 类 型 进行 判断 ， 不 匹配 的 文件 
将 会 在 控制 台 输 出 。 最 终 仅 在 列表 中 显 
示 符 合 条 件 的 文件 ， 如 图 7-3 所 示 。 
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图 7-3 限制 文件 类 型 
使 用 这 种 方法 虽然 能 够 根据 文件 返回 的 类 型 过 滤 所 选择 的 文件 ， 但 是 需要 编写 额外 的 


代码 。 在 HTMLS5 中 还 可 以 为 File 类 型 添加 accept 属性 来 指定 要 过 滤 的 文件 类 型 。 设 置 完 
accept 属性 后 ， 在 浏览 器 中 选择 文件 时 会 自动 筛选 符合 条 件 的 文件 。 


【 例 7-3] 
通过 为 File 类 型 的 input 元 素 添加 accept 属性 限制 用 户 只 能 选择 PNG 和 JPEG 格式 的 图 片 。 
实现 代码 如 下 : 


<input type="file" id="iptFile" multiple="true” accept="image/png,image/jpeg"/> 


这 里 限制 可 选择 的 文件 类 型 为 “image/jpeg” 和 “image/png”， 如 图 7-4 所 示 为 在 
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Chrome 浏览 器 中 选择 文件 的 效果 ， 如 图 7-5 所 示 为 在 FireFox 浏览 器 中 选择 文件 的 效果 。 
Ee—————— 
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图 7-4 Chrome 浏览 器 选择 文件 效果 图 7-5 FireFox 浏览 器 选择 文件 效果 


风力 7.2 ”实践 案例 : 文件 上 传 


通过 前 面 的 练习 我 们 已 经 掌握 了 如 何 获取 选择 文件 的 基本 信息 ， 也 能 够 限制 文件 的 类 型 。 
但 是 这 些 文件 只 是 保存 在 本 地 ， 并 没有 实现 上 传 功能 。 

本 次 案例 将 使 用 HIMLS 结合 PHP 代码 将 用 户 选 择 的 多 个 文件 批量 上 传 到 服务 器 ， 具 体 
步骤 如 下 。 

加 得 创建 一 个 文件 index.html 作为 实例 文件 。 

加 区 在 页 面 的 合适 位 置 使 用 form 创建 一 个 表单 ， 再 添加 File 类 型 的 对 象 file 和 其 他 按钮 。 
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<form id="form1" enctype="multipart/form-data" method="post" action="serverphp"> 
选择 文件 
<input type="file" id="iptFile" multiple="true"” name="file[]"/> 
<input type="button" value=" 确 定 " onclick="selectedFiles()" /><input type="submit" name="upload" 
value=" 上 传 "/> 


</form> 


在 上 述 代码 中 ，File 类 型 使 用 了 multiple 属性 ， 从 而 可 以 选择 多 个 文件 。 单 击 “ 确定 ” 
按钮 后 执行 selectedFiles() 函数 ， 而 单 击 “ 上 传 ” 按 钮 则 会 提交 表单 。 

加 台 在 表单 下 方 制作 一 个 用 于 显示 选中 文件 信息 的 表格 。 编 写 selectedFiles() 函数 显示 选 
中 文件 的 信息 ， 具 体 实 现 可 参考 7.1.1 节 。 

四 对 创建 服务 器 端的 serverphp 文件 ， 用 于 在 单 击 “ 上 传 ”按钮 之 后 实现 上 传 功能 ， 具 
体 代码 如 下 : 


<?php 
header("content-type:text/html;charset=utf-8"); 
iflisset($_POST["upload"])) // 单 击 “ 上 传 ” 按 钮 
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{ 


// 遍历 所 有 文件 

for($i=0; 5i<count(S$_FILES[file']['"name']); $i++) { 

// 获取 文件 名 称 

StmpFilePath = $_FILES['file']['tmp_name'][$i]; 

// 判断 文件 是 否 为 空 

if ($tmpFilePath != ""){ 
// 指定 文件 的 上 传 路 径 
SnewFilePath = "./uploads/" . $_FILES['file']['name"][$i]; 
// 上 传 到 服务 器 
move_uploaded_file(StmpFilePath, $newFilePath); 

} 

1 

echo " 上 传 成 功 ， 本 次 一 共 上 传 "count($_FILES['file']['name'])." 个 文件 。"; 


} 
?> 


上 述 代 码 非 常 容易 理解 。 首 先 判 断 是 否 有 文件 ， 如 果 有 则 通过 循环 逐一 进行 上 传 处 理 ， 
将 文件 保存 到 程序 所 在 的 uploads 目录 中 ， 最 后 提示 上 传 成 功 。 

0 号 至 此 ， 实 例 就 制作 完成 了 。 运 行 index.html 文件 ， 选 择 多 个 文件 之 后 单 击 “ 确 定 ” 
按钮 查看 它们 的 信息 ， 如 图 7-6 所 示 。 

By 单 击 “ 上 传 ”按钮 开始 上 传 操 作 ， 完 成 之 后 会 给 出 提示 信息 。 为 了 验证 文件 是 否 
传 成 功 ， 可 以 打开 程序 所 在 的 uploads 目录 查看 刚才 上 传 的 文件 ， 如 图 7-7 所 示 。 
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图 7-6 预览 运行 效果 图 7-7 查看 上 传 的 文件 


)/) 7.3 FileReader 接口 


使 用 File 对 象 提 供 的 各 种 属性 可 以 获取 文件 的 相关 信息 ， 如 名 称 、 大 小 和 类 型 等 。 但 
是 ， 如 果 要 读 取 文件 的 内 容 则 需要 调用 HTMLS5 中 新 增 的 FileReader 接口 。FileReader 接 


图 178 


第 7 章 “文件 和 离线 应 用 | 


一 


提供 了 很 多 | 
方法 。 


"3 


于 读 取 文 件 的 方法 ， 以 及 监听 读 取 进度 的 事件 。 本 节 将 详细 介绍 该 接口 的 使 用 


FileReader 接口 简介 


FileReader 接口 主要 
API， 通 过 这 些 API 可 以 从 浏览 


须 先 判断 浏览 


if(typeof FileReader=="undefined") 


{ 
alel 
jelse{ 
alert(" 浏览 器 环境 正常 。 
varfd=new FileReader(); 


} 


当 访 问 不 同 的 文件 时 必须 创建 不 同 的 FileReader 接口 实例 。 
都 将 返回 一 个 新 的 FileReader 对 象 ， 这 样 才能 访问 不 同文 件 中 的 数据 。 


"对 不 起 ， 浏 览 器 不 支持 FileReader 接口 。"); 


来 将 文件 载 入 内 存 并 读 取 文 件 中 的 数据 。 该 接口 提供 了 一 组 异步 
览 器 的 主线 程 中 
由 于 FileReader 接口 是 HIMLS 的 新 特性 ， 
是 否 对 FileReader 接口 提供 支持 ， 代 码 如 下 : 


异步 访问 文件 系统 中 的 数据 。 
因此 并 非 所 有 浏览 器 都 支持 ， 在 使 用 之 前 必 


因为 每 调用 一 次 FileReader 
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FileReader 接口 的 常用 方法 如 表 7-1 所 示 。 
表 7-1 FileReader 接口 的 常用 方法 
6 以 二 进 制 格式 读 取 文 | 调用 该 方法 时 ， 将 File 对 象 返回 的 数据 以 二 进 制 
件 内 容 字符 串 的 形式 读 入 内 存 
_ 以 数组 缓冲 的 方式 读 | 调用 该 方法 时 ， 将 File 对 象 返回 的 数据 以 数组 组 
readAsArrayBuffer(file) 取 文 件 内 容 冲 的 形式 读 入 内 存 
a 、，、、 | encoding 参数 表示 文本 文件 编码 的 方式 ， 默 认 值 
readAsText(file,encoding) gd 为 UTF-8。 调 用 该 方法 时 ， 以 encoding 指定 的 编 
码 格 式 将 获取 的 数据 按 文 本 方式 读 入 内 存 
以 数据 URL 格式 读 | 调用 该 方法 时 ， 将 File 对 象 返回 的 数据 以 一 串 数 
readA fil 
| 芭 交 牢 内 容 据 URL 字符 的 形式 展示 在 页 面 中 
i 读 取 数据 中 止 时 ， 将 | 如 果 在 读 取 文 件数 据 过 程 中 出 现 异 常 或 错误 ， 将 
自动 触发 该 方法 触发 该 方法 ， 返 回 错误 代码 信息 


叫 ) 7.3.2 读 取 文本 文件 内 容 


FileReader 接口 的 readAsText( 方法 可 以 以 文本 格式 读 取 文件 的 内 容 。 


使 


readAsText() 


方法 有 两 个 参数 ， 第 


下 面 使 用 readAsText( 方法 制作 一 


个 参数 是 file 类 型 表示 要 读 取 的 文件 ， 第 二 个 参数 是 字符 串 
指定 读 取 时 使 用 的 编码 ， 默 认 值 为 UTF-8。 
个 实现 读 取 用 户 选 择 的 文本 文件 内 容 的 案例 ， 最 终 将 


类 型 用 于 
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内 容 显示 在 页 面 上 。 首 先 创 建 一 个 表单 ， 添 加 文件 上 传 域 和 结果 显示 布局 。 代 码 如 下 : 


<h2 style="font-size:18px;"> 游戏 简介 上 传 </h2> 
<form id="form1"> 
选择 一 个 文本 文件 
<input type="file" id="iptFile” /> 
<input type="button" value=" 确定 " onclick="readFileContent()" /> 
</form> 


<p id="ret"></p> 


上 述 代码 的 重点 是 file 类 型 和 “确定 ”按钮 ，file 类 型 允许 用 户 选 择 一 个 文件 。 单 击 “ 确 
定 ” 按 钮 后 执行 readFileContent() 函数 将 文件 内 容 显示 在 下 方 的 p 元 素 中 
readFileContent() 函数 的 实现 代码 如 下 : 


o 


function readFileContent() // 读 取 文本 文件 的 内 容 
{ 
if($("iptFile").files.length) // 判断 是 否 选择 了 文件 
T 
var aFile=$("iptFile").files[0]; 
if(!/textV\w+/.test(aFile.type)) // 判断 是 否 为 文本 文件 
{ 
alert(aFile.name+" 不 是 文本 文件 不 能 读 取 ."); 
return false; 
} 
if(typeof FileReader=="undefined") ”// 判断 当前 浏览 器 是 否 支持 FileReader 接口 
{ 
alert(" 对 不 起 ， 浏 览 器 不 支持 FileReader 接口 。"); 
} 
else{ 
var fd=new FileReader(); // 创建 FileReader 接口 的 对 象 
fd.onload=function(res{ ”// 显示 文件 内 容 
S$("ret").innerHTML=this.result; 
} 
fd.readAsText(aFile); // 开始 读 取 
} 
|; 
else{ 
alert(" 没有 选择 文件 ， 不 能 继续 。"); 
return false; 


如 上 述 代码 所 示 ， 在 readFileContent() 函数 中 针对 是 否 选择 了 文件 、 文 件 类 型 是 否 为 文 
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本 文件 以 及 浏览 器 是 否 支持 FileReader 接口 的 情况 进行 了 判断 。 真 正 使 用 readAsText( 方法 
读 取 文件 内 容 的 代码 非常 简单 ， 不 过 要 注意 结果 属性 result 只 能 在 onload 事件 中 使 用 。 


现在 运行 即 可 查看 读 取 文 本 文件 内 容 的 效果 。 如 图 7-8 所 示 为 Chrome 浏览 器 运行 效果 ， 
图 7-9 所 示 为 Firefox 浏览 器 运行 效果 。 


图 7-8 Chrome 浏览 器 运行 效果 图 7-9 Firefox 浏览 器 运行 效果 


咱 ) 7.3.3 ”监听 读 取 事件 


除了 读 取 文件 的 方法 外 ，FileReader 接口 还 提供 了 很 多 事件 ， 以 及 一 套 完整 的 事件 处 理 
机 制 。 通 过 这 些 事件 的 触发 ， 可 以 清晰 地 捕获 读 取 文件 的 详细 过 程 ， 以 便 更 加 精确 地 定位 每 
次 读 取 文件 事件 的 先后 顺序 ， 为 编写 事件 代码 提供 有 力 的 支持 。FileReader 接口 的 常用 事件 
如 表 7-2 所 示 。 


表 7-2 FileReader 接口 的 常用 事件 
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事件 名 称 描 述 
onloadstart 当 读 取 数 据 开始 时 ， 触 发 该 事件 
onprogress 当 正 在 读 取 数据 时 ， 触 发 该 事件 
onabort 当 读 取 数 据 中 止 时 ， 触 发 该 事件 
onerror 当 读 取 数 据 失 败 时 ， 触 发 该 事件 
onload 当 读 取 数 据 成 功 时 ， 触 发 该 事件 的 
onloadend 当 请 求 操作 成 功 时 ， 无 论 操作 是 否 成 功 ， 部 将 触发 该 事件 设 


经 过 反复 测试 证 明 ， 一 个 文件 通 [ee | 计 
过 FileReader 接口 中 的 方法 正常 读 取 onloadstart onloadend 
时 ， 触 发 事件 的 先后 顺序 如 图 7-10 
所 示 。 


a 


图 7-10 正常 读 取 文件 时 的 事件 触发 顺序 
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针对 图 7-10 的 说 明 如 下 。 

@ 大 部 分 文件 读 取 过 程 都 集中 在 onprogress 事件 ， 该 事件 耗 时 最 长 。 

@ 如 果 文 件 在 读 取 过 程 中 出 现 异常 或 中 止 ， 那 么 onprogress 事件 将 结束 ， 直 接触 发 onerror 
或 onabort 事件 ， 而 不 会 触发 onload 事件 。 

@ onload 事件 是 在 文件 读 取 成 功 时 触发 ， 而 onloadend 虽然 也 在 文件 操作 成 功 时 触发 ， 但 该 
事件 不 论文 件 读 取 是 否 成 功 都 将 触发 。 因 此 ， 想 要 正确 获取 文件 数据 ， 必 须 在 onload 事 


件 中 编写 代码 。 
【 例 7-4】 
区 对 上 节 读 取 文 本 文件 内 容 的 案例 进行 修改 ， 实 现 单 击 “ 确 定 ” 按 钮 后 监听 onload、 
onloadstart、onloadend 和 onprogress 事件 。 


使 用 readFileContent() 函数 替换 原来 的 同名 函数 即 可 ， 代 码 如 下 : 


EE 

一 function readFileContent() // 读 取 文本 文件 的 内 容 

三 { 

局 if($("iptFile").files.length) // 判断 是 否 选 择 了 文件 

十 

(@) var aFile=$("iptFile").files[0]; 

六 if(1/textV\w+/ :test(aFile.type)) // 判断 是 否 为 文本 文件 

ye alert(aFile.name+" 不 是 文本 文件 不 能 读 取 ."); 

人 一 return false; 

v9 

< } 

E* if(typeof FileReader=="undefined") // 判断 当前 浏览 器 是 否 支持 FileReader 接口 

On { 

3 alert(" 对 不 起 ， 浏 览 器 不 支持 FileReader 接口 。"); 

Ee Jelse 

a { 
var fd=new FileReader(); // 创建 FileReader 接口 的 对 象 
fd.readAsText(aFile); // 开始 读 取 
fd.onload=function(res){ //onload 事件 


S$("ret").innerHTML+=" 数据 读 取 成 功 ! <br/>"; 
} 
fd.onloadstart=function(res){ // onloadstart 事件 
S$("ret").innerHTML+=" 开始 读 取 数据 .…<br/>"; 


} 

fd.onloadend=function(res){ // onloadend 事件 
S$("ret").innerHTML+=' 文件 读 取 成 功 ! <br/>'; 

} 

fd.onprogress=function(res){ // onprogress 事件 
S$("ret").innerHTML+=" 正在 上 传 数据 .…<br/>"; 

} 
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else{ 
alert(" 没有 选择 文件 ， 不 能 继续 。"); 


return false; 


} 


如 上 述 代码 所 示 ， 监 听 文 件 正常 读 取 过 程 中 将 触发 的 4 个 事件 ， 在 每 个 事件 中 都 将 读 取 
状态 显示 到 页 面 。 
运行 该 页 面 ， 选 择 一 个 文本 文件 后 单 击 “ 确 定 ” 按 钮 开始 读 取 ， 读 取 效 果 如 图 7-11 所 示 。 


Ss C file:///D:/HtmlSpace/code7/3/index.html 


先 择 一 个 文本 文件 革 EE nio vxt 


图 7-11 文件 读 取 过 程 中 各 事件 执行 的 先后 顺序 


咱 ) 7.3.4 ”处 理 读 取 异常 


然 使 用 FileReader 接口 中 的 方法 可 以 快速 实现 对 文件 的 读 取 。 但 是 ， 在 文件 读 取 的 过 
程 中 ， 不 可 避免 地 会 出 现 各 种 类 型 的 错误 和 异常 。 这 时 便 可 以 通过 FileError 接口 获取 错误 与 
异常 所 产生 的 错误 代码 ， 再 根据 返回 的 错误 代码 分 析 具 体 发 生 错误 与 异常 的 原因 。 

在 出 现下 列 情况 时 ， 可 能 会 导致 FileReader 接口 出 现 潜在 的 错误 与 异常 。 

e@ 访问 某 个 文件 的 过 程 中 ， 该 文件 被 移动 、 删 除 或 者 被 其 他 应 用 程序 修改 。 

由 于 权限 原因 ， 无 法 读 取 文 件 的 数据 信息 。 

文件 出 于 案例 因素 的 考虑 ， 在 读 取 文件 时 返回 一 个 无 效 的 数据 信息 。 

读 取 文件 太 大 ， 超 出 URL 网 址 的 限制 ， 将 无 法 返回 一 个 有 效 的 数据 信息 。 
® 在 读 取 文件 的 过 程 中 ， 应 用 程序 本 身 触 发 了 中 止 读 取 的 事件 。 

在 异步 读 取 文件 的 过 程 中 ， 出 现 错误 与 异常 都 可 以 使 用 FileError 接口 ， 该 接口 主要 用 于 
异步 提示 错误 。 当 FileReader 对 象 无 法 返回 数据 时 ， 将 形成 一 个 错误 属性 ， 而 该 属性 则 是 一 
个 FileError 接口 ， 通 过 该 接口 列 出 错误 与 异常 的 错误 代码 信息 。 

表 7-3 列 出 了 FileError 接口 中 提供 的 错误 代码 以 及 对 应 的 说 明 。 
表 7-3 FileError 接口 错误 代码 
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由 于 权限 原因 ， 不 能 读 取 文件 数据 
ENCODING ERR 读 取 的 文件 太 大 ， 超 出 读 取 时 地 址 的 限制 


例如 ， 下 面 的 示例 代码 演示 了 读 取 文件 时 的 异常 处 理 。 


var reader = new FileReader(); 
reader.readAsText(file,"gb2312"); 


reader.onload = function(e){ // 添加 onload 事件 
document.getElementByld("showlnfo").innerHTML = this.result; 

} 

reader.onerror=function(res){ // 添加 onerror 事件 
var num=res.target.errorcode; // 获取 错误 代码 
document.getElementByld('showlnfo').innerHTML=" 文件 无 法 显示 : "; 
if(num==1){ 


document.getElementByld('showlnfo').innerHTML+=" 无 法 找到 或 原文 件 已 被 修改 ! "; 
jelse if(num==2){ 
document.getElementByld('showlnfo'").innerHTML+=" 无 法 获取 数据 文件 ! "; 
jelse if(num==3){ 
document.getElementByld('showlnfo').innerHTML+=" 中 止 文件 读 取 的 过 程 ! "; 
jelse if(num==4){ 
document.getElementByld('showlnfo'").innerHTML+=" 无 权 读 取 数 据 文件 ! "; 
jelse if(num==5){ 
document.getElementByld('showlnfo'").innerHTML+=" 读 取 的 文件 太 大 ! 7 
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} 
网 } 


计 7 7.4 ”实践 案例 : 预览 图 片 


使 用 FileReader 接口 的 readAsDataURL() 方法 实现 不 通过 后 全 及 时 预览 图 片 的 功能 ， 其 
中 人 允许 用 户 选 择 多 个 图 片 文件 ， 单 击 按钮 提交 后 显示 这 些 文件 的 缩 略 效果 图 。 

readAsDataURL() 方法 可 以 将 文件 读 取 为 一 串 URL 字符 串 。 该 字符 串通 常会 使 用 特殊 格 
式 的 URL 形式 直接 读 入 页 面 ， 如 图 像 格式 等 。 该 方法 的 语法 格式 如 下 : 


var result = FileReader.readAsDataURL(blob); 


blob 参数 表示 文件 为 只 读 原 始 数据 对 象 。readAsDataURL( 方法 的 返回 值 是 一 个 表示 数 
据 的 本 地 对 象 ， 案 例 的 主要 实现 步骤 如 下 。 
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人 D 参考 例 7-1 在 页 面 中 添加 表单 ， 允 许多 选 文件 的 input 元 素 和 一 个 “确定 ”按钮 。 
玉 在 表单 下 方 添加 一 个 id 是 ret 的 p 元素， 该 元 素 用 于 显示 选中 的 图 片 。 代 码 如 下 : 


<p id="ret"></p> 


0 号 单 击 “确定 ”按钮 会 调用 selectedFiles() 函数 。 该 函数 用 于 获取 用 户 选择 的 文件 ， 并 
且 进 行 判断 ， 如 果 选 择 的 文件 是 图 片 则 将 其 显示 在 页 面 上 ， 否 则 会 输出 到 控制 人 台 。 代 码 如 下 : 


function selectedFiles() 
| 
var result=$("ret"); 


var selectedFiles = $("iptFile").files; 


for(var i=0;i<selectedFiles.length;i++) // 遍历 选中 的 多 个 文件 
{ 
var file = selectedFiles[i]; /1/ 获取 单个 文件 
var imageType = /image.*/; // 声明 文件 类 型 
if (Ifile.type.match(imageType)) { // 如 果 上 传 文件 不 合法 
console.log(file.name+" 不 是 图 像 文件 ， 因 此 不 能 上 传 。"); 
continue; 
} 
var reader = new FileReader(); // 实例 FileReader 接口 对 象 
readeronload = function(e){ // 显示 图 像 


result.innerHTML += 
"<img src="+e.target.result+" width=100 height=100 style='padding- 
right:1px; padding-bottom:1px; />"; 
b 
reader.readAsDataURL (file); 


1dl13SeABr+ESSI+9T1W1H 人 


} 


0 允 运行 页 面 ， 选 择 一 些 文 
件 再 单 击 “ 确 定 ”按钮 预览 图 片 。 
如 图 7-12 所 示 为 选中 了 12 个 文件 ， 
从 控制 人 输出 可 以 看 出 有 3 个 不 
是 图 片 。 


图 7-12 显示 预览 图 像 的 效果 
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&7) 7.5 ”离线 应 用 


随 着 Web 应 用 的 普及 ，Web 离线 应 用 显得 尤为 重要 。 因 为 Web 应 用 程序 要 时 刻 与 服务 
器 保持 交互 才能 正常 工作 。 一 旦 中 断 网 络 ，Web 的 相关 应 用 也 随 之 停止 。 在 HIMLS 中 新 添 
加 了 离线 应 用 功能 ， 可 以 实现 本 地 缓存 和 离线 应 用 开发 。 


叫 ) 7.5.1 离线 Web 应 用 程序 概述 


离线 Web 应 用 程序 是 指 当 客户 端 与 Web 应 用 程序 的 服务 器 没有 建立 连接 时 ， 也 能 够 正 
常 在 客户 端 本 地 使 用 该 Web 应 用 程序 进行 有 关 的 操作 。HTMLS5 中 引用 了 离线 应 用 程序 缓存 ， 
使 得 在 无 网 络 连接 状态 下 运行 应 用 程序 成 为 可 能 。 
开发 人 员 可 以 指定 HTMLS5 应 用 程序 中 具体 哪些 资源 (如 CSS、JavaScript 和 HIML 等 ) 
脱 机 时 可 用 。 离 线 应 用 的 场景 很 多 ， 常 见 的 情况 如 下 。 

e 编辑 文档 。 

e 编辑 和 显示 演示 文档 。 

® 创建 待 办 事宜 列表 。 

e ”阅读 和 撰写 电子 邮件 。 

使 用 离线 存储 避免 了 加 载 应 用 程序 时 所 需 的 常规 网 络 请 求 ， 如 果 缓存 清单 文件 是 最 新 的 ， 
浏览 器 就 不 用 检查 其 他 资源 是 否 为 最 新 。 大 部 分 应 用 程序 可 以 从 本 地 应 用 缓存 中 加 载 完成 ， 
另外 从 缓存 中 加 载 资源 可 节省 带宽 ， 这 对 移动 Web 应 用 是 相当 重要 的 。 

既然 使 用 本 地 缓存 的 API 可 以 实现 离线 Web 应 用 程序 的 开发 ， 那 么 它 和 浏览 器 网 页 缓存 
有 哪些 区 别 呢 ? 以 下 几 点 列 出 了 比较 明显 的 区 别 。 

(1) 本 地 缓存 是 为 整个 Web 应 用 程序 服务 的 ， 浏 览 器 的 网 页 缓存 只 服务 于 单个 网 页 。 

(2) 本 地 缓存 只 缓存 那些 指定 需要 缓存 的 网 页 ， 任何 网 页 都 具有 网 页 缓存 。 

(3) 本 地 缓存 是 可 靠 的 ， 开 发 人 员 可 以 控制 哪些 内 容 进行 缓存 ， 哪 些 内 容 不 进行 缓存 ; 
网 页 缓存 是 不 安全 、 不 可 靠 的 。 

(4) 开发 人 员 可 以 通过 编程 的 方法 来 控制 缓存 的 更 新 ， 利 用 缓存 对 象 的 各 种 属性 、 状 态 
和 事件 等 开发 强大 的 离线 应 用 程序 。 


咱 ) 7.5.2 manifest 文件 


为 了 能 够 在 离线 状态 下 访问 Web 应 用 ， 应 将 离线 时 需要 缓存 的 文件 的 URL 写 入 manifest 
文件 。 当 浏览 器 与 服务 器 建立 联系 后 ， 浏 览 器 会 根据 manifest 文件 所 列 的 缓存 清单 将 相应 的 
资源 文件 缓存 在 本 地 。 

manifest 是 一 个 简单 的 文本 文件 ， 在 该 文件 中 以 清单 的 形式 列举 了 需要 被 缓存 或 不 需要 
被 缓存 的 资源 文件 的 名 称 ， 以 及 这 些 资源 文件 的 访问 路 径 。 开 发 人 员 可 以 为 每 一 个 页 面 单独 
指定 一 个 manifest 文件 ， 也 可 以 为 整个 Web 应 用 程序 指定 一 个 总 的 manifest 文件 。 


切 l 建 manifest 文件 


使 用 任何 文本 编辑 器 都 可 以 新 建 manifest 文件 ， 只 要 在 保存 文件 时 将 扩展 名 设置 为 
“.manifest” 即 可 。 例 如 ， 创 建 名 称 为 hello manifest 的 文件 ， 该 文件 的 详细 内 容 如 下 : 
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CACHE MANIFEST 
#version 0.0.0 
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CACHE: 

# 带 相对 路 径 的 资源 文件 

javascript/common.js 

style/good.css 

images/logo.jpg 

NETWORK: 

# 列 出 在 线 时 需要 访问 的 资源 文件 

index.aspx 

index.aspx.cs 

FALLBACK: 

# 以 成 对 形式 列 出 不 可 访问 文件 的 蔡 补 资源 文件 
/product/AddProduct.php /user/AddUser.php 


在 manifest 文件 中 指定 资源 文件 的 时 候 ， 可 以 把 资源 文件 分 为 三 类 : CACHE、NETWORK 
和 FALLBACK。 具 体 说 明 如 下 。 

(1) CACHE 表示 离线 时 浏览 器 需要 缓存 服务 器 资源 到 本 地 的 文件 列表 。 为 某 个 页 面 编 
写 manifest 类 型 文件 时 不 需要 将 该 页 面 放 入 列表 中 ， 因 为 浏览 器 在 进行 本 地 资源 缓存 时 自动 
将 这 个 页 面 进行 了 缓存 。 

(2) NETWORK 表示 在 线 时 需要 访问 的 资源 文件 列表 ， 即 指定 不 进行 本 地 缓存 的 资源 
文件 。 这 些 文件 只 有 在 浏览 器 与 服务 器 之 间 建 立 联系 时 才能 访问 。 如 果 设 置 为 “*”， 则 表示 
除了 CACHE 类 型 中 标明 需要 缓存 的 文件 外 都 不 进行 缓存 。 

(3) FALLBACK 表示 以 成 对 方式 列 出 不 访问 文件 的 替补 文件 。 第 一 个 文件 为 能 够 在 线 
访问 时 使 用 的 资源 文件 ， 第 二 个 文件 为 不 能 在 线 访问 时 使 用 的 备用 资源 文件 。 

上 述 3 个 类 型 都 是 可 选 的 ， 但 是 如 果 文 件 开 头 没 有 指定 任何 类 型 而 直接 使 用 资源 文件 ， 
浏览 器 会 把 这 些 资源 文件 默认 为 CACHE 类 型 ， 直 到 遇 到 第 一 个 类 型 为 止 。 另 外 manifest 文 
件 允 许 同一 类 型 出 现 多 次 ， 如 以 下 清单 中 的 代码 。 


CACHE MANIFEST 

#version 5.6.0 

CACHE: 

# 带 相对 路 径 的 资源 文件 
javascript/login.js 

images/logo.jpg 

NETWORK: 

# 列 出 在 线 时 需要 访问 的 资源 文件 
http://192.168.0.9:5433/admin/login.php 
CACHE: 

# 追加 CACHE 类 型 中 的 内 容 
/user/AddUser.php 


在 manifest 文件 中 编写 代码 时 需要 注意 以 下 几 点 。 
e@ manifest 文件 中 的 第 一 行 必须 是 “CACHE MANIFEST”， 它 的 作用 是 告诉 浏览 器 这 是 一 个 
缓存 配置 文件 ， 即 对 本 地 缓存 中 的 资源 文件 进行 具体 设置 。 
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e 在 清单 中 编写 注释 时 要 另 起 一 行 ， 并 且 以 “# ”开头 。 
e@ 通过 注释 的 方式 标明 每 一 个 manifest 文件 的 版 本 号 ， 以 便 更 新 文件 时 使 用 。 


外 绑 定 页 面 
绑 定 页 面 时 需要 在 Web 应 用 程序 页 面 中 html 元 素 的 manifest 属性 中 指定 文件 的 URL。 
指定 方法 如 下 : 


<html manifest="newfile.manifest">/* 省 略 具体 代码 */</html> 


全 配置 ,Is 服务 器 

创建 manifest 文件 并 将 该 文件 与 页 面 绑 定 后 无 法 实现 Web 页 面 的 离线 访问 ， 还 需要 让 服 
务 器 支持 扩展 名 为 “.manifest” 的 文件 ， 否 则 服务 器 无 法 读 取 manifest 类 型 的 文件 。 

下 面 以 Windows 服务 器 为 例 ， 介 绍 如 何 使 TS 支持 manifest 类 型 的 文件 ， 其 具体 步骤 
如 下 。 

四 雁 打开 IIS 后 选中 “默认 网 站 ”或 其 他 站 点 名 称 ， 然 后 单 击 右键 并 选择 “属性 ”命令 ， 
弹出 对 话 框 。 在 对 话 框 中 切换 到 “HTTP 头 ”选项 卡 ， 如 图 7-13 所 示 。 

加 单 击 “ 文 件 类 型 "按钮 , 在 弹出 的 对 话 框 中 单 击 “ 新 类 型 ”按钮 , 弹出 添加 “文件 类 型 ” 
对 话 框 ， 如 图 7-14 所 示 。 

gg 输入 扩展 名 和 内 容 类 型 后 单 击 “ 确 定 ”按钮 ， 完 成 对 manifest 文件 类 型 的 创建 ， 效 
果 如 图 7-15 所 示 。 
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HF 闫 | 自 定义 错误 | ASP. WET | 
口 有 用 内 容 过 
Dy 文件 类型 
| 注册 的 文 件 各 0D 注册 绚 文件 况 型 0D) 
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再 到 表册 ] 后 二 ED 
图 7-13 “HTTP 头 ”选项 卡 图 7-14 “文件 类 型 ”对 话 框 ”图 7-15 添加 文件 类 型 完成 


【 例 7-5】 
前 面 已 经 详细 介绍 了 manifest 文件 的 创建 、 使 用 以 及 如 何在 IIS 服务 器 上 进行 配置 。 下 
面 通过 一 个 示例 演示 在 断 开 网 络 之 后 仍然 能 够 百度 首页 的 图 片 ， 主 要 步骤 如 下 。 
加 外 添加 新 的 HIML 页 面 ， 在 页 面 的 合适 位 置 导入 脚本 文件 并 添加 image 元 素 和 input 
元 素 等 ， 页 面 的 主要 代码 如 下 : 


<html manifest="base.manifest"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
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<title> 离线 的 基本 应 用 </title> 
<link href="css/base.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<divid="m"> 
<p><img src="http://www.baidu.com/img/baidu_sylogo1.gif" width="270" height="129" ></p> 
/* 省 略 其 他 代码 */ 
</div> 
</body> 
</html> 


顾及 HIML 页 面 绑 定 了 名 称 为 base.manifest 的 文件 。 创 建 该 文件 并 列举 服务 器 需要 缓存 
至 本 地 的 文件 清单 。 该 文件 的 具体 代码 如 下 : 


CACHE MANIFEST 

#version 5.2.0 

CACHE: 

# 带 相对 路 径 的 资源 文件 

css/base.css 
http://www.baidu.com/img/baidu_sylogo!1.gif 
NETWORK: 

# 列 出 在 线 时 需要 访问 的 资源 文件 
http://www.baidu.com/cache/global/img/gs.gif 
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号 首先 在 有 网 络 的 情况 下 运行 页 画 i 
后 断 开 网 络 连 接 重新 运行 页 面 ， 两 次 的 一 
运行 效果 相同 。 如 图 7-16 所 示 为 FireFox 巨 ai 全 百度 


浏览 器 下 的 运行 效果 。 


新 闻 网 页 目 吧 知道 MP3 图 片 视频 地 图 
| 


百科 文库 hao123 | 更 多 >> 


把 百 肛 潮 加 到 点 面 
A 推广 | 内 内 坪 拉 | 关于 |About Bagh 
2 Baidu 舍 用 百 座 前 兴 访 训 ICPiE030173 


图 7-16 页 面 运行 效果 
大 区 浏览 器 与 服务 器 的 交互 
当 使 用 离线 应 用 程序 时 理解 浏览 器 和 服务 器 之 间 的 通信 模式 是 相当 重要 的 ， 例 7-5 通过 
在 页 面 上 绑 定 base .manifest 文件 缓存 了 两 个 资源 文件 ， 其 中 浏览 器 与 服务 器 的 数据 交互 过 程 
如 下 。 


(1) 浏览 器 : 请 求 访问 页 面 http://localhost/base/lixian/base.html。 
(2) 服务 器 : 返回 base.html 页 面 。 
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(3) 浏览 器 : 解析 返回 的 base.html 页 面 ， 请 求 服务 器 返回 该 页 面包 含 的 全 部 资源 文件 ， 
包括 base.manifest 文件 。 
(4) 服务 器 : 返回 浏览 器 请 求 的 所 有 资源 文件 。 
(5) 浏览 器 : 解析 返回 的 base.manifest 文件 ， 请 求 返 回 URL 清单 中 的 资源 文件 。 
(6) 服务 器 : 再 次 返回 URL 清单 中 本 地 缓存 的 文件 。 
(7) 浏览 器 : 对 本 地 缓存 进行 更 新 , 将 新 获取 的 URL 清单 中 的 资源 文件 更 新 至 本 地 缓存 ， 
且 触 发 一 个 事件 通知 本 地 缓存 被 更 新 。 
经 过 上 述 步骤 ， 浏 览 器 清单 中 列 出 的 文件 已 经 完全 载 入 了 缓存 。 如 果 再 次 打开 浏览 
器 访问 base.html 且 basemanifest 文件 没有 被 修改 过 ， 浏 览 器 与 服务 器 的 数据 交互 过 程 
如 下 。 
(1) 浏览 器 : 再 次 请 求 页 面 http://localhost/base/lixian/base.html。 
(2) 浏览 器 : 找到 此 页 面 被 本 地 缓存 ， 于 是 使 用 本 地 缓存 中 的 base.html 页 面 。 
(3) 浏览 器 : 使 用 所 有 本 地 缓存 中 的 资源 文件 解析 base.html 网 页 。 
(4) 浏览 器 : 向 服务 器 请 求 manifest 文件 。 
(5) 服务 器 : 返回 一 个 304 代码 ， 通 知 浏览 器 manifest 没有 发 生变 化 。 
如 果 网 页 上 的 资源 文件 被 本 地 缓存 过 ， 下 次 请 求 打 开 这 个 页 面 时 总 是 会 先 使 用 本 地 缓存 
中 的 资源 ， 然 后 再 请 求 manifest 文件 。 
如 果 再 次 打开 浏览 器 访问 base.html 页 面 且 base.manifest 文件 已 经 被 更 新 过 ， 那 么 浏览 
与 服务 器 之 间 的 数据 交互 如 下 。 
(1) 浏览 器 : 再 次 请 求 页面 http://localhost/base/lixian/base.html。 
(2) 浏览 器 : 找到 此 页 面 被 本 地 缓存 ， 于 是 使 用 本 地 缓存 中 的 base.html 页 面 。 
(3) 浏览 器 : 使 用 所 有 本 地 缓存 中 的 资源 文件 解析 base.html 网 页 。 
(4) 浏览 器 ， 向 服务 器 请 求 manifest 文件 。 
(5) 服务 器 : 返回 更 新 过 的 manifest 文件 。 
(6) 浏览 器 :处理 manifest 文件 ， 如 果 该 文件 已 经 被 更 新 则 请 求 所 有 要 求 进行 本 地 缓存 
的 资源 文件 ， 包 括 base.html 页 面 本 身 。 
(7) 浏览 器 :返回 要 求 进行 本 地 缓存 的 资源 文件 。 
(8) 对 本 地 缓存 进行 更 新 ， 将 新 获取 的 URL 清单 中 的 资源 文件 更 新 至 本 地 缓存 ， 且 触 
发 一 个 事件 通知 本 地 缓存 被 更 新 。 
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即使 资源 文件 被 修改 过 ， 但 是 任何 之 前 载 入 线 存 的 资源 都 不 会 发 生变 化 ， 只 有 重新 打开 这 个 
| 页 面 时 才 会 使 用 更 新 后 的 资源 文件 。 | 


串 ) 7.5.3 applicationCache 对 象 


applicationCache 对 象 代表 本 地 缓存 ， 可 以 用 来 通知 用 户 本 地 缓存 已 经 被 更 新 ， 也 人 允许 用 
户 手动 更 新 本 地 缓存 。 但 是 只 有 在 manifest 文件 被 修改 时 ， 该 对 象 才 会 触发 一 个 事件 表示 已 
经 更 新 。 
三 applicationcache 对 象 的 事件 
applicationCache 对 象 中 包含 一 系列 的 事件 ， 它 们 的 具体 说 明 如 表 7-4 所 示 。 
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表 7-4 applicationCache 对 象 的 常用 事件 


事件 名 称 说 明 
checking 检查 manifest 文件 是 否 存 在 
downloading 检查 到 mainfest 文件 已 更 新 就 执行 下 载 操作 
noupdate 返回 304 表示 没有 更 新 ， 通 知 浏览 器 直接 使 用 本 地 文件 
Progress 下 载 时 周期 性 触发 ， 可 以 通过 该 事件 获取 已 经 下 载 的 文件 个 数 
cached 下 载 后 结束 触发 ， 表 示 缓 存 已 经 成 功 
updateready 检测 本 地 缓存 是 否 完成 更 新 
obsolete 加 入 manifest 缓存 文 件 ， 返 回 HTTP404 错误 或 者 410 错误 时 ， 触 发 该 事件 
error 本 地 缓存 出 现 错误 触发 该 事件 


eITOT 


面 的 


表 7-4 所 示 事 件 中 任何 与 本 地 缓存 有 关 的 处 理发 生 错误 都 会 触发 error 事件 。 可 能 会 触发 
事件 的 情况 分 为 以 下 几 种 。 

e 开始 更 新 本 地 缓存 时 缓存 名 单 被 再 次 更 改 。 

e 缓存 名 单 被 找到 且 更 改 ， 但 浏览 器 不 能 下 载 某 个 缓存 名 单 中 的 资源 。 

e 缓存 名 单 被 找到 且 没 有 更 改 ， 但 引用 缓存 名 单 中 的 HTML 页 面 不 能 正确 下 载 。 

@ 缓存 名 单 中 返回 一 个 404 错误 ( 页 面 未 找到 ) 或 者 410 错误 (永久 消失 ) 。 

【 例 7-6】 
本 案例 将 浏览 器 与 服务 器 交互 过 程 中 所 发 生 的 事件 显示 到 页 面 上 ， 实 现 的 具体 步骤 如 下 。 
外 添加 新 的 HIML 页 面 ， 在 页 面 的 合适 位 置 添加 div 元 素 ， 该 元 素 显 示 事件 列表 。 页 
具体 代码 如 下 : 


<body onLoad="init();"> 
<div id="mr" style="height:100px; width:100%; text-align:left; margin-top:20px;"></div> 
</body> 


大 区 页 面 加 载 时 调用 init0 函数 ， 在 该 函数 中 添加 多 个 可 能 触发 的 事件 ， 其 具体 实现 代码 


如 下 : 


function init() 
{ 
var msg = document.getElementByld("mr"); 
applicationCache.addEventListener("checking",function(){ 
msg.innerHTML += " 检测 该 文件 是 否 存在 .…<br/>"; 
btrue); 
applicationCache.addEventListener("noupdate",function(){ 
msg.innerHTML +=" 没有 最 新 的 缓存 更 新 .…<br/>"; 
}true); 
applicationCache.addEventListener("downloading",function(){ 
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msg.innerHTML+= " 正在 下 载 可 用 的 缓存 …<br/>"; 
btrue); 
applicationCache.addEventListener("progress",function(){ 
msg.innerHTML +=" 本 地 缓存 正在 更 新 中 .…<br/>"; 
btrue); 
applicationCache.addEventListener("updateready",function(){ 
msg.innerHTML +=" 触发 了 缓存 事件 .…<br/>"; 
}true); 
applicationCache.addEventListener("cached",function(){ 
msg.innerHTML +=" 下 载 结束 后 缓存 已 经 成 功 .…<br/>"; 
}true); 
applicationCache.addEventListener("error",function(){ 
msg.innerHTML +=" 本 地 缓存 更 新 时 出 现 错误 .…<br/>"; 


}true); 


加 运行 本 案例 进行 测试 。 当 在 浏览 器 中 打开 网 页 且 manifest 文件 没有 更 新 时 ， 效 果 如 
图 7-17 所 示 。 当 在 浏览 器 中 打开 网 页 且 manifest 文件 已 经 更 新 时 ， 效 果 如 图 7-18 所 示 。 
站 可 A 
0 spplication 事 件 人 spplication 事 件 
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图 7-17 没有 更 新 manifest 文件 时 的 效果 图 7-18 更 新 manifest 文件 时 的 效果 


故 applicationcache 对 象 的 方法 

applicationCache 对 象 除了 包含 事件 外 也 包含 多 个 方法 ， 其 中 常用 的 方法 有 两 个 : update() 
方法 和 swapCache() 方法 。 它 们 的 具体 说 明 如 下 。 

(1) update()。 

update() 方法 可 以 手动 更 新 本 地 缓存 ， 调 用 格式 为 window.application.update()。 如 果 有 可 
更 新 的 本 地 缓存 调用 该 方法 可 以 对 其 进行 更 新 ， 除 了 通过 updateready 事件 监测 是 否 为 可 更 新 
的 本 地 缓存 外 ， 也 可 以 调用 applicationCache 对 象 的 status 属性 。status 属性 有 多 个 值 ， 当 该 
值 为 4 时 表示 有 可 更 新 的 本 地 缓存 。 

(2) swapCache()。 

swapCache() 方法 也 可 以 用 来 更 新 本 地 缓存 ， 但 是 它 与 update( 方法 有 两 点 不 同 。 一 是 它 
们 更 新 本 地 缓存 的 时 间 不 一 样 ，swapCache() 方法 将 本 地 缓存 立即 更 新 ， 它 比 update( 方法 的 
执行 要 早 。 二 是 两 个 方法 触发 的 事件 也 不 一 样 ，swapCache0 方法 必须 在 updateready 事件 中 
才能 调用 ， 而 update0 方法 可 以 随时 调用 。 


和 


1dUoSeAer+SsSSI+S1WNLH 人 


正 
本 地 多 
本 
本 
本 
触 


第 7 章 文件 和 离线 应 用 
oY 


applicationCache 对 象 的 status 属性 表示 缓存 状态 ， 它 的 可 选 值 及 其 说 明 如 下 。 
e uncache 数值 为 0， 表 示 本 地 浏览 器 缓存 与 应 用 程序 缓存 没有 关联 。 

idle 数值 为 1， 表 示 应 用 程序 的 缓存 是 最 新 缓存 。 

checking 数值 为 2， 检查 manifest 文件 是 否 存在 。 

downloading 数值 为 3， 如 果 manifest 文件 已 经 被 更 新 ， 则 处 于 开始 下 载 时 。 
updateready ”数值 为 4， 确 定 manifest 文件 可 以 被 更 新 。 

obsolete ”数值 为 5， 表示 找到 文件 时 的 状态 。 


A 二 和 


| 虽然 使 用 swapCache() 方法 可 以 立刻 更 新 本 地 缓存 ， 但 是 并 不 意味 着 页 面 上 的 图 像 和 脚本 文件 | 
| 人 和 人生 有 人 和 本 机 下 和 全 生生 | 
【 例 7-7]】 
创建 一 个 案例 ， 通 过 调用 update() 方法 和 swapCache( 方法 实现 更 新 本 地 缓存 的 功能 。 
实现 该 功能 的 具体 步骤 如 下 。 
加 看 添加 新 的 HIML 页 面 , 在 页 面 的 合适 位 置 添加 h2 元素 , 该 元 素 用 于 显示 更 新 的 标题 。 
代码 如 下 : 


<body onLoad="init();"> 
<h2>applicationCache 对 象 的 方法 示例 </h2> 
</body> 


四 如 页 面 加 载 时 会 自动 调用 init0 函数 ， 该 函数 实现 更 新 本 地 缓存 的 功能 ， 其 具体 代码 
如 下 : 


function init() 


{ 


setInterval(function(){ 
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applicationCache.update(); 
},5000); 
applicationCache.addEventListener("updateready",function(){ 
if(confirm(" 本 地 缓存 已 经 被 更 新 , 需要 通过 刷新 页 面 获取 最 新 应 用 程序 版 本 , 是 否 刷新 ?")) 
{ 
applicationCache.swapCache(); 
location.reload(); 


btrue); 


} 


上 述 代 码 每 隔 5 秒 调用 一 次 applicationCache 对 象 的 update0 方法 检查 服务 器 上 的 
manifest 文件 是 否 更 新 ， 如 果 有 更 新 浏览 器 会 自动 下 载 该 文件 中 所 有 请 求 本 地 缓存 的 资源 文 
件 ， 当 这 些 资源 文件 下 载 完 毕 时 触发 updateready 事件 ， 询 问 是 否 立 刻 刷 新 页 面 。 如 果 用 户 选 
择 刷新 则 调用 swapCache() 方法 手动 更 新 本 地 缓存 ， 更 新 完成 后 刷新 页 面 。 
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轩 结 运行 本 示例 的 代码 进行 测试 ， 其 最 终 运行 效果 如 图 7-19 所 示 。 


TayvaScrinot 
ocalhost> 


本 地 缓存 已 经 被 更 新 ,需要 通过 刷新 页 面 获 职 最 新 应 用 程序 版 
本 ， 是 否 刷新 ? 


全 上 执行 此 页 面 中 的 和 本 


图 7-19 触发 updateready 事件 时 的 运行 效果 


才 检 测 网 络 的 当前 在 线 状态 
如 果 要 实现 浏览 器 与 服务 器 在 数据 交互 时 的 离线 应 用 ， 很 重要 的 一 个 步骤 是 获取 应 用 的 
在 线 状态 。 只 有 检测 出 页 面 的 在 线 状态 ， 才 会 在 离线 后 将 数据 保存 到 本 地 ， 上 线 时 再 将 数据 


保存 到 服务 器 ， 从 而 实现 离线 数据 的 交互 功能 。 
通过 Navigator 对 象 的 onLine 属性 可 以 检测 当前 网 络 的 状态 ， 该 属性 的 基本 用 法 如 下 : 


if(navigatoronLine) // 在 线 
alert(" 当前 状态 在线 "); 
else 


alert(" 当前 状态 : 离线 "); 
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由 于 onLine 属性 的 滞后 性 ， 它 往往 不 能 及 时 反馈 当前 网 络 的 变化 状态 。 而 在 HIML5 中 
通过 调用 online 事件 和 offline 事件 可 以 及 时 侦 测 网 络 在 线 与 离线 状态 。 
添加 新 的 HTML 页 面 , 在 页 面 的 合适 位 置 添加 p 元 素 显 示 网 络 当前 状态 。 页 面 代码 如 下 : 


<body onLoad="init();"> 

<h2> 检测 网 络 当 前 在 线 状 态 </h2> 

<fieldset><legend> 检测 网 路 当前 状态 </legend><p id="status"></p></fieldset> 
</body> 


页 面 加 载 时 调用 init( 函数 ， 在 该 函数 中 为 window 对 象 添加 online 事件 和 offline 事件 。 
该 函数 的 具体 代码 如 下 : 


function init() 


{ 


window.addEventListener("online",function(){ 
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document.getElementByld("status").innerHTML = " 当前 状态 为 : 在线 "; 
bfalse); 
window.addEventListener("offline",function(){ 
document.getElementByld("status").innerHTML = " 当前 状态 为 : 离线 "; 
jifalse); 


一 


运行 上 述 代 码 进行 测试 ， 具 体 效果 不 再 截图 。 


ER [=i 
2 7.6 ”练习 题 有 
| 
一 、 填 空 是 三 
1. 使 用 File 对 象 的 属性 可 以 获取 不 带路 径 的 文件 名 称 。 到 
2.， FileError 接口 中 的 着 误 常量 表示 由 abort 事件 触发 的 读 取 中 止 异常 。 口 
3. 在 FileReader 接口 中 ， 方法 用 于 读 取 文 本 文件 。 (0 
4. 文件 也 叫 清单 文件 ， 它 以 清单 的 形式 列举 了 需要 被 缓存 或 不 需要 被 缓存 。 和) 
的 资源 文件 的 文件 名 称 。 ® 
5. 清单 文件 中 声明 表示 离线 时 浏览 器 需要 缓存 服务 器 资源 到 本 地 的 文件 EE 蚊 
中 表 。 E* 
列表 > 
二 、 选 择 题 DD 
1. 下 列 不 属于 File 对 象 的 属性 的 是 0 
A. type B. name Pe 
C. lastModifiedDate D. path SS 
2. 如 下 面 代码 所 示 ， 假 设 需 要 获取 用 户 选择 文件 的 数量 ， 应 该 使 用 代码 g 


<input type="file" 1d="fileselect" multiple="true" /> 


A. document.getElementByld("fileselect").files 

B. document.getElementById("fileselect").files.count 

C. document.getElementBylId("fileselect").files.length 

D. document.getElementById("fileselect"). length 

3. 为 file 类 型 添加 属性 可 以 限制 用 户 选 择 文件 的 类 型 。 
A. accept B. ext 

C. name D. type 

4. FileReader 接口 的 主要 作用 是 

A. 添加 一 个 图 像 

了 ， 表 示 用 户 选择 的 文件 列表 

C. 将 文件 读 入 内 存 ， 并 且 读 取 文 件 中 的 数据 

D. 以 上 皆 是 

5. 调用 abort( 方法 将 触发 FileReader 接口 的 事件 。 
A. abort B. onabort 

C. onerror D. onend 
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6. manifest 文件 中 ， 如 果 开 头 没 有 指定 任何 类 型 而 直接 写 入 资源 文件 ， 浏 览 器 会 自动 将 


这 些 资 源 文 件 看 作 类型。 
A. CACHE MANIFEST B. CACHE 
C. FALLBACK D. NETWORK 
7. HTML5 中 检测 缓存 文件 是 否 被 更 新 的 属性 值 是 
A. obsolete B. idle 
C. downloading D. updateready 


他 < 上 机 实践 : 实现 图 像 的 预览 效果 


根据 本 章 学 习 的 知识 制作 一 个 图 像 预览 效果 的 案例 。 要 求 仅 允许 上 传 卫 G、PNG 和 了 BMP 
格式 的 文件 ， 而 且 大 小 不 能 超过 2MB 。 对 于 不 符合 条 件 的 文件 都 输出 到 控制 舍 ， 符 合 条 件 的 
则 使 用 readAsDataURL0 方法 读 取 并 显示 在 页 面 上 。 
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本 章 之 前 的 内 容 ， 只 介绍 了 HTML5 中 简单 的 布局 元 素 和 表单 元 素 ， 以 及 绘图 、 数 据 存储 
和 文件 的 操作 。 实 际 上 ， 除 了 这 些 功 能 外 ，HTMLS5 还 包含 多 个 高 级 功能 ， 这 些 功 能 并 不 像 以 
前 新 增 元 素 和 属性 那样 使 用 频繁 。 因 此 ， 本 章 将 这 些 高 级 功能 放 到 一 章 进 行 介绍 ， 包 括 拖 放 
操作 、 跨 文档 通信 、 多 线程 和 地 理 位 置 。 

通过 本 章 的 学 习 ， 读 者 可 以 了 解 HTML5 提供 的 高 级 技术 ， 以 便 熟 练 使 用 这 些 技术 实现 某 
些 常 用 的 功能 。 


心 | 本 章 学 习 要 点 
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097 8.1 拖 放 功能 
在 HTML4 及 之 前 的 版 本 中 ， 如 果 要 实现 文件 或 元 素 的 拖 放 操 作 ， 需 要 结合 
onmousedown、onmousemove 和 onmouseup 等 多 个 事件 来 完成 。 但 是 HTML5 提供 了 支持 拖 


放 操作 的 API， 从 而 大 大 简化 了 拖 放 的 有 关 代码 。 


串 )》 8.1.1 拖 放 API 简介 


区 HIMLS 新 增 了 一 个 draggable 全 局 属性 ， 该 属性 为 rue 时 表示 人 允许 元 素 有 拖 动 效果 ， 并 
且 在 拖 放 过 程 中 会 触发 拖 放 事件 。 调 用 拖 放 事件 可 以 更 加 准确 、 及 时 地 反映 元 素 从 拖 动 到 放 
下 这 一 过 程 的 各 种 状态 与 数据 值 。 表 8-1 列 出 了 执行 拖 放 操作 的 相关 事件 及 具体 说 明 。 

和 表 8-1 拖 放 功能 的 常用 事件 

三 事件 名 称 事件 主体 说 明 

局 dragstart 被 拖 放 的 元 素 在 开始 拖 放 操作 时 触发 

© drag 被 拖 放 的 元 素 正在 拖 放 时 触发 

六 dragenter 拖 放 过 程 中 鼠标 经 过 的 元 素 当 被 拖 放 元 素 进入 某 元 素 时 触发 

ye dragover 拖 放 过 程 中 鼠标 经 过 的 元 素 当 被 拖 放 元 素 在 某 元 素 范围 内 移动 时 触发 
ny dragleave 抑 放 过 程 中 鼠标 经 过 的 元 素 当 被 拖 放 元 素 移 出 目标 元 素 时 触发 

< | am 拖 放 的 目标 元 素 当 目 标 元 素 完全 接收 被 拖 放 元 素 时 触发 
dragend 拖 放 的 对 象 元 素 在 可 个 拖 放 操作 结束 时 触发 

二 【 例 8-1] : <h2> 元 系 的 拖 放 </h2> 

ng 下 面 创建 一 个 案例 演示 拖 动 元 素 在 页 面 ; 


<div id="divDrag" draggable="true"></div> 
<div id="divTips"></div> 
<div id="divArea"></div> 


</body> 


中 所 触发 的 重要 事件 状态 ， 主 要 步骤 如 下 。 

IE 创建 一 个 HIML5 页 面 。 在 页 面 中 
添加 3 个 div 元素 ,分 别 表 示 被 拖 放 的 元 素 
当前 所 触发 的 事件 状态 和 目标 元 素 。 代 码 
如 下 : 


哪 


四 加 页 面 加 载 时 调用 init0 函数 ， 该 函数 
的 具体 实现 如 下 ; 


<body onLoad="init();"> 


function init() 


{ 


document.ondragover = function(e) 


e.preventDefault(); // 阻止 默认 方法 ， 取 消 拒绝 被 拖 放 


} 


document.ondrop = function(e) 
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e.preventDefault(); // 阻止 默认 方法 ， 取 消 拒绝 被 拖 放 
} 
var drag = document.getElementByld("divDrag"); // 获取 被 拖 放 的 元 票 
var area = document.getElementByld("divArea"); // 获取 目标 元 票 
var status = document.getElementByld("divTips"); // 获取 div 元 标的 显示 状态 


drag.addEventListener("dragstart",function(event){ 
status.innerHTML = " 元 票 正在 开始 拖 动 "; 


}); 

area.addEventListener("drop",function(){ 
status.innerHTML = " 元 票 拖 动 成 功 "; 

}); 

area.addEventListener("dragleave",function(){ 
status.innerHTML = " 元 票 拖 动 正在 离开 "; 


二 
一 
}); 三 
} a 
十 
上 述 代码 中 添加 了 页 面 的 dragover 事件 | ea 虽 
和 drop 事件 ， 它 们 都 使 用 e.preventDefault() : Bone od 0 
方法 取消 页 面 的 默认 值 ， 允 许 拖 放 页 面 。 由 | De wW 
于 在 拖 放 过 程 中 首先 被 拖 放 的 是 页 面 ， 如果， ee t 
页 面 不 可 以 拖 放 ， 那 么 页 面 中 的 元 素 也 不 a 5 
以 拖 放 。 分 别 为 拖 放 元 素 和 目标 元 素 添 加 ; } < 
dragstart 事件 、drop 事件 和 dragleave 事件 ， DD 
在 这 些 事件 中 通过 设置 innerHTML 属性 的 什 0D 在 浏览 器 中 打开 页 面 ， 然 后 拖 动 元 ”区 
显示 各 种 状态 。 素 查看 效果 ， 最 终 运行 效果 如 图 8-1 所 示 。 = 
9) 为 页 面 中 的 div 元 素 添加 样式 ， 其 ， i OO. 
主要 样式 代码 如 下 : I 
#divDrag{ 
width:100px; 元 素 正在 开始 和 动 
display:block; 
height:100px; 
background-color:blue; 
border:1px solid red; 


图 8-1 拖 动 过 程 触发 的 事件 


"8.1.2 dataTransfer 对 和 象 


上 一 节 案 例 中 的 拖 放 元 素 还 没有 放 入 目标 元 素 中 ， 如 果 要 实现 这 个 功能 需要 调 
dataTransfer 对 象 ，dataTransfer 对 象 专门 用 于 推 带 拖 放 功能 的 数据 。 表 8-2 列 出 了 dataTransfer 
对 象 的 常用 属性 及 其 说 明 。 
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表 8-2 dataTransfer 对 象 的 常用 属性 


属性 名 称 说 明 
files 如 果 有 则 返回 被 抑 动 文件 的 FileList 清单 
types 返回 dragstart 事件 中 设置 的 数据 格式 ， 如 果 是 外 部 文件 的 拖 放 则 返回 files 
返回 允许 执行 抑 放 操作 的 效果 ， 其 值 包 括 none、copy、copyLink、copyMove、 
effectAllowed . a 
link、linkMove、move、all 和 uninitialized 
dropEffect 返回 已 选择 的 抑 动 效果 ， 如 果 该 操作 效果 与 起 初 设置 的 effectAllowed 效果 不 符 
则 拖 动 操作 失败 
items 返回 DataTransferItemList 对 象 ， 即 拖 动 数据 


Wl Re 
| stfeetAllowed 属性 和 dropEffect 属性 都 可 以 自 定 义 拖 放 过 程 中 的 效果 ， 但 是 它们 绑 定 的 元 素 不 | 
同 。effectAllowed 用 于 dragstart 事件 中 绑 定 被 拖 放 元 素 ， 而 dropEffect 属性 用 于 绑 定 目标 元 素 。 该 
属性 中 指定 的 效果 必须 在 effectAllowed 属性 中 存在 ， 否 则 不 能 实现 自 定 义 拖 放 效 果 。 | 
除了 属性 外 ，dataTransfer 对 象 还 包含 多 个 方法 ， 这 些 方法 的 具体 说 明 如 下 。 

e@ setData(DOMString format,DOMString data) “为 元 素 添加 指定 数据 。 

e@ getData(DOMString format) 返回 指定 的 数据 ， 如 果 数 据 不 存在 ， 则 返回 空 字符 串 。 

® setDraglmage(Element img,long x,long y) ”指定 拖 放 元 素 时 跟随 鼠标 移动 的 图 片 ，x 

和 y 分 别 是 相对 于 鼠标 的 坐标 。 
e clearData(DOMString format) 删除 指定 格式 的 数据 ， 如 果 未 指定 格式 ， 则 删除 当前 元 
素 携带 的 所 有 数据 。 

上 述 方 法 中 使 用 了 format 作为 形 参 ， 它 表示 读 取 、 存 入 或 清空 时 的 数据 格式 。 该 参数 的 
格式 包含 4 种 :text/plain (文本 文字 格式 )、text/html (HTML 页 面 代 码 格式 )、text/xml (XML 
字符 格式 ) 和 text/url-list (URL 格式 列表 ) 。 

【 例 8-2】 

创建 一 个 案例 演示 dataTransfer 对 象 的 使 用 方法 。 本 案例 主要 调用 dataTransfer 对 象 的 
setData() 方法 和 getData() 方法 实现 拖 放 数 据 的 效果 ， 调 用 setDragImage() 方法 实现 设置 拖 放 
图 标的 效果 ， 其 主要 步骤 如 下 。 

园 友 添加 新 的 HIML 页 面 ， 在 页 面 的 合适 位 置 添 加 p 元 素 和 img 元 素 。 页 面 的 具体 代码 
如 下 : 
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<body onLoad="preLoad();"> 
<p class="qz424_c4_img t_a_c" id="divArea" style="min-height:200px;border: #9f9f9f 2px solid;margin: 
Spx;"> </p> 

<p class="qz424_c4_img2 clearfix"> 
<img src="images/qz427_bg0.png" id="divDrag" draggable="true"/> 
<img src="images/qz427_bg1.png" id="divDrag1" draggable="true"/> 
<img src="images/qz427_bg2.png" id="divDrag2" draggable="true"/> 
<img src="images/qz427_bg3.png" id="divDrag3" draggable="true"/> 
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</p> 
</body> 


看台 页 面 加 载 时 调用 preLoad0 函数 ， 在 该 函数 中 获取 被 拖 动 的 元 素 和 目标 元 素 并 分 别 为 
它们 添加 事件 。 具 体 代 码 如 下 : 


function preLoad() 


var drag = document.getElementByld("divDrag"); // 获取 被 拖 动 的 元 票 
var area = document.getElementByld("divArea"); // 获取 目标 元 素 
drag.addEventListener("dragstart",function(event){ // 添加 dragstart 事件 


var dt = event.dataTransfer; // 获取 dataTransfer 对 象 
var objimg =document.getElementByld ("ico"); 

dt.effectAllowed = "move"; 

dt.setDraglmage(objimg,10,10); 

dt.setData("text/plain"," 拖 动 时 改变 图 标 "); 


},false); 
area.addEventListener("dragover",function(event){ // 添加 dragover 事件 


var dt = e.dataTransfer; 
dt.dropEffect = "move"; 


e.preventDefault(); 


j}false); 
area.addEventListener("drop",function(event){ // 添加 drop 事件 


var dt= event.dataTransfer; 

Var str = dt.getData("text/plain"); 

area.textContent += str+"\n"; 

e.preventDefault(); // 取消 拒绝 被 拖 放 元 票 的 设置 
e.stopPropagation(); // 停止 其 他 事件 的 进程 


}false); 
document.ondragover = function(e) 


{ 


} 


e.preventDefault(); // 阻止 默认 方法 ， 取 消 拒 绝 被 拖 放 


document.ondrop = function(e) 


1 


} 
} 


e.preventDefault(); // 阻止 默认 方法 ， 取 消 拒绝 被 拖 放 


上 述 代码 为 被 拖 动 的 元 素 添加 了 dragstart 事件 ， 在 该 事件 中 通过 setDragImage() 方法 


设置 拖 放 


dataTransfer 对 象 中 添加 拖 放 数据 。 接 着 为 目标 元 素 添 加 dragove 


dropEffect 


图 标 ， 通 过 effectAllowed0) 方法 返回 拖 动 时 的 效果 ， 然 后 调用 setData() 方法 在 


件 ， 在 该 事件 中 通过 
属性 设置 拖 动 的 效果 。 最 后 添加 目标 元 素 的 drop 事件 ， 在 该 事件 中 调用 getData() 
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方法 读 取 dataTransfer 对 象 中 的 拖 放 数 据 , 调用 e.stopPropagation() 方法 停止 其 他 事件 的 进程 ， 
否则 目标 元 素 不 能 正常 接收 拖 放 来 的 数据 。 

区 加 运行 本 案例 的 代码 进行 测试 ， 拖 动 时 会 显示 自 定义 的 拖 动 图 标 ， 拖 动 完 成 后 会 在 右 
侧 显示 自 定 义 的 拖 放 数 据 ， 最 终 运行 效果 如 图 8-2 所 示 。 如 果 拖 动 的 是 普通 图 片 将 会 显示 图 
片 的 路 径 ， 如 图 8-3 所 示 。 


LSJLEIGT 3 区 恒 | 

D 7 x 用 
€ CG © fie///E/HtmlSpace/code8/2/indexhtml 女人 GC © file///E/HtmlSpace/code8/2/index.html 公 | © 
你 为 什么 这 么 红 ， 深 度 解析 如 何 包装 自己 的 形象 , 干 万 不 电 你 为 什么 这 么 红 ， 深 度 解析 如 何 包装 自己 的 形象 , 干 万 不 出 
要 错过 (绝世 好 文 ， 敬 请 收藏 ) 要 错过 (绝世 好 文 ， 敬 请 收藏 ) pl 


@ 邓 大 传 8 @ 邓 大 传 
4-21 09:28 4-21 09:28 


拖 动 时 改变 图 标 拖 动 时 改变 图 标 拖 动 时 改变 图 标 
file///E/HtmiSpace/code8/2/images/qz427_bgl.png 
file;///E/HtmlSpace/code8/2/images/qz427_bg2.png 
fleVWEVHtmlspace/code8/2/images/qz427_bg3,.png 


E, 
SDDS 


图 8-2 dataTransfer 对 象 的 拖 动 效 果 图 8-3 普通 图 片 的 拖 动 效果 
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9 8.2 ”实践 案例 ; 拖 放 式 选择 员工 


通过 上 一 节 的 介绍 我 们 已 经 掌握 了 如 何 允许 元 素 拖 放 、 设 置 拖 放 数 据 以 及 拖 放 效 果 。 
本 节 通 过 一 个 实践 案例 实现 通过 拖 放 的 方式 从 员工 列表 中 选择 员工 到 岗位 列表 中 ， 具 体 步 
又 如 下 。 

加 旬 创建 一 个 HIMLS 页 面 。 在 页 面 的 合适 位 置 使 用 纪元 素 定义 员工 列表 ， 其 中 每 个 li 
元 素 表 示 一 个 员工 。 再 添加 一 个 岂 元 素 用 于 显示 结果 ， 这 部 分 代码 如 下 : 


<div class="yq_mkf_r"> 
<ul id="member_list"> 
<li class="clearfix item" draggable="true" id='m_1'> <img src="images/0.jpg" alt="" /> 魏 卫 红 
</li> 
<li class="clearfix item" draggable="true" id='m_2'><img src="images/1.jpg" alt="" /> 刘 长 玲 
</li> 
<liclass="clearfix item" draggable="true" id='m_3'> <img src="images/2.jpg" alt="" /> 杨 天 路 
</li> 
<liclass="clearfix item" draggable="true" id='m_4'> <img src="images/3.jpg" alt="" /> 徐 新 丽 


</li> 
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<li class="clearfix item" draggable="true" id='m_5'><img src="images/yh_p1.jpg" /> 陈 佳 豪 


</li> 
</ul> 
</div> 
<div class="yq_mkf_s"> 


<ul id="ret_member"><li class="yq_mkf_s_txt"></li> 


</ul> 
</div> 
在 上 述 代 码 中 ， 为 元素 添 加 了 draggable 属性 允许 进行 拖 动 操作 ，id 为 ret_ member 的 电 
ul 元 素 用 于 显示 结果 。 
因 及 页面 加 载 时 调用 自 定义 的 init0 函数 ， 该 函数 的 具体 代码 如 下 : 考 
function init() 三 
{ 请 
var dragltems = document.getElementsByClassNamel"item'"); // 获取 所 有 的 li 元 票 5 
for(var i = 0;i<dragltems.length;i++) // 遍历 该 元 票 (@) 
{ ep) 
dragltems[i].addEventListener("dragstart",function(e){ // 添加 dragstart 事件 0 
var dt = e.dataTransfer; // 获取 dataTransfer 事件 人 
dt.setData("text/plain",this.id); // 在 对 象 中 存 入 数据 一 
bfalse); 部 
} 中 
Var ret_member = document.getElementByld("ret_member"); // 获取 目标 元 村 0 
ret_member.addEventListener("drop",function(e){ // 添加 drop 事件 9 
var dt = e.dataTransfer; // 获取 dataTransfer 对 象 5 
var intval = dt.getData("text/plain"); // 从 对 象 中 获取 数据 Gg 
Drop(intval); // 删除 图 片 
yfalse); 
} 


上 述 代码 首先 通过 getElementsByClassName() 方法 获取 全 部 上 元素， 然后 遍历 时 为 每 个 
元 素 添加 拖 动 时 触发 的 dragstart 事件 。 在 该 事件 中 调用 dataTransfer 对 象 存 入 工 元素 对 应 的 
ID 号 ， 即 this.id 的 值 。 之 后 获取 id 为 ret_ member 的 目标 元 素 ， 向 该 元 素 添 加 drop 事件 ， 在 
该 事件 中 调用 getData0) 读 取 存 入 的 单个 元 素 的 ID 号 ， 将 该 IJD 号 作为 实 参 调用 Drop( 函数 
进行 移 除 操作 。 

大名 Drop0 函数 通过 removeChild() 方法 移 除 相册 中 指定 的 图 片 形成 删除 的 效果 ， 同 时 通 
过 全 局 变量 intDeleNum 累计 删除 图 片 的 数量 ， 并 将 总 数量 的 值 显 示 到 页 面 中 。 该 函数 的 具体 
代码 如 下 : 


function Drop(id) 
{ 
var node = document.getElementByld(id); // 获取 指定 的 1i 元 票 


var ret_member = document.getElementByld("ret_member"); 
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var html = '<li>'+node.innerText+'<span class="yq_mkf_s_close"> X </span></li>'; 
node.parentNode.removeChild(node); // 移 除 员 工 
ret_ memberinnerHTML += html; 
toast(" 成 功 添加 ， 员 工 : "+node.innerText); 
} 


加 允 通过 document 对 象 添加 页 面 的 ondragover 事件 和 ondrop 事件， 它们 都 调用 
e.preventDefault0 方法 取消 页 面 的 默认 值 。 具 体 代码 如 下 : 


document.ondragover = function(e) 


{ 
e.preventDefault(); // 阻止 默认 方法 ， 取 消 拒绝 被 拖 放 


} 


document.ondrop = function(e) 


{ 
e.preventDefault(); // 阻止 默认 方法 ， 取 消 拒绝 被 拖 放 


} 


上 述 代码 中 添加 页 面 的 ondragover 事件 和 ondrop 事件 ， 它 们 都 使 用 epreventDefaultO 方 
法 取消 页 面 的 默认 值 ， 允 许 拖 放 页 面 。 

大 旺 调用 自 定义 的 toast0 函数 ， 该 函数 用 于 显示 浮动 的 提示 信息 ， 具 体 实现 可 参考 源码 。 
最 后 保存 对 页 面 的 修改 。 

罗 运行 HTMLS5 页 面 进行 测试 ， 从 员工 列表 中 拖 动 时 的 效果 如 图 8-4 所 示 ， 添 加 成 功 
时 的 效果 如 图 8-5 所 示 。 
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图 8-4 拖 动 时 的 效果 图 8-5 添加 成 功 时 的 效果 
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为 了 代码 的 安全 性 ， 在 JavaScript 脚本 | 
中 不 允许 跨 域 访问 其 他 页 面 中 的 元 素 ， 这 多 
不 同 页 面 间 数 据 的 互 访 带 来 了 障碍 。HTML 
解决 了 这 个 问题 ， 允 许 在 两 个 不 同 的 域名 与 
之 间接 收 和 发 送 数据 。 
跨 文档 消息 通信 又 称 为 跨 文档 消息 传送 


(Cross Document Messaging, CDM) ， 是 


2 


项 


指 在 来 自 不 同 域 的 页 面 间 传 递 消息 。 例 如 ， 
www.a.com 域 中 的 页 面 与 位 于 一 个 内 赃 框 架 


中 的 www.b.com 域 中 的 页 面 通 信 。 

跨 文 档 消息 通信 的 核心 是 postMessage( 
方法 。 它 可 以 实现 向 另 一 个 地 方 传递 数据 ， 
一 般 是 指 包含 在 当前 页 面 中 的 过 ame 元 素 ， 
或 者 向 当 前 页 面 弹 出 的 窗 中 
到 跨 文档 消息 时 ， 
window 对 象 的 message 导 
消息 起 到 接收 消 和 息 可 能 要 经 
触发 messag 


行 


事件 。 
过 一 段 时 间 的 延迟 


元 
处 理 程序 的 事件 
<form> 
<p> 
<label> 消息 内 容 : </label> 
<input type="text" id="msg" /> 
<input type="submit" /> 
</p> 


<iframe src="frame.html" id="myframe" frameborder="0" width="480"></iframe> 


</form> 


大 鸡 上 述 页 面 将 作为 主页 面 ， 并 且 在 该 页 面 
JavaScript 向 子 页 面 传递 数据 ， 代 码 如 下 : 


var win = document.getElementByld('myframe').contentWindow; 
addEvent(document.querySelector('form'), 'submit', function(e){ 
win.postMessage(document.getElementByld('msg').value, "http://localhost"); 


if (e.preventDefault) 
e.preventDefault(); 
e.returnValue = false; 


有) 


function addEvent(elem, event, func ) { 


| 两 个 input 元 素 。 代 码 如 下 : 


@ data 作为 postMessage() 方 法 的 第 一 
个 参数 传 入 的 字符 串 数据 。 

origin ”发 送 消息 的 文档 所 在 的 域名 ， 
例如 http://www.baidu.com。 

source 发 送 消息 的 文档 的 window 
对 象 代理 ， 这 个 代理 对 象 主要 用 于 
在 发 送 上 一 条 消息 的 窗口 中 调用 
postMessage() 方法 。 如 果 发 送 消息 的 
窗口 来 自 同一 个 域 ， 那 么 这 个 对 象 就 


是 window。 


【 例 8-3】 
创建 一 个 示例 ， 人 允许 在 主页 面 中 输入 一 
息 ， 然 后 将 该 信息 传递 到 另 一 个 页 面 进 


处 理 ， 再 到 主页 面 9 


h 显示 结果 ， 实 现 步 骤 


加 夏 创建 一 个 普通 的 HIMLS 页 面 作为 
页 面 ， el p 元 素 和 iame 
素 ， 其 中 p 元 素 中 又 包含 一 个 label 元 素 和 
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ph 骨 入 了 一 个 子 页 面 fame.html。 下 面 通过 
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if (llwindow.attachEvent){ 
elem.attachEvent('on' + event, func); 
} 
else{f 
elem.addEventListener(event, func, false); 
} 
} 


上 述 代码 首先 获取 子 页 面 对 象 ， 然 后 调用 自 定义 的 addEvent() 函数 ， 在 该 函数 中 通过 
postMessage() 方法 向 子 页 面 传递 数据 。 
四 时 创建 frame.html 文件 ， 页 面 代 码 如 下 : 


<div class="wrapper"> 
<h3 class="subtitle"> 框架 来 源 于 域 : http://localhost</h3> 
<div class="msg" id="message"> 等 待 消息 …</div> 

</div> 


加 下 在 子 页 面 frame.html 中 添加 window 对 象 的 message 事件 , 并 且 用 JavaScript 接 收 数据 ， 
将 数据 显示 出 来 。 代 码 如 下 : 


window.addEventListener('message', receiver, false); 
function receiver(e) { 
if (e.origin == 'http://localhost') { 
document.getElementByld('message').innerHTML = '<p>'+e.origin+' 输入 的 内 容 是 : <strong>' 
+e.data + '</strong></p>'; 
}else{ 
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alert(" 很 抱歉 ， 您 传递 过 来 的 页 面 并 不 是 来 自 域名 http://localhost"); 
} 
} 


在 上 述 代码 中 ， 通 过 e.origin 判断 并 获取 从 上 个 页 面 传递 过 来 的 域名 ，e.data 获取 传递 过 
来 的 数据 。 

看 时 在 浏览 器 中 输入 本 例 的 地 址 进行 测试 ， 页 面 初始 效果 如 图 8-6 所 示 。 

困 在 页 面 的 文本 框 中 输入 内 容 ， 然 后 单 击 “ 提 交 ” 按 钮 查看 效果 ， 如 图 8-7 所 示 。 


1 乱 文 革 对 入 
€ 3 © Dlocalhost/code8/4/postmessage.html 
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消息 内 容 ， EEI| 


框架 来 源 于 域 : http://localhost 
等 竺 消息 


图 8-6 页 面 初始 效果 


HTML 5 跨 文 档 通信 


消息 内 容 ， na [ 琴 


框架 来 源 于 域 : http-Wlocalhost 


napJhocanost 久 入 的 FE 是 : hello 


图 8-7 页 面 测试 效果 
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虽然 上 面 例 子 的 主页 面 和 子 页 面 位 于 同一 个 域 中 ， 但 是 这 并 不 影响 不 同 域名 之 间 消 息 的 使 用 。 | 
| 读者 可 以 参考 上 述 代 码 更 改 域名 ， 实 现 不 同 域名 之 间 的 跨 文档 消息 传递 。 | 


介 ) 8.4 本 地 多 线程 


多 线程 是 HIML5 在 Web 应 用 程序 方面 新 增 的 重要 特性 。 进 程 可 以 将 前 台 的 JavaScript 
代码 分 割 成 若干 代码 块 分 别 交 给 不 同 的 后 全 程序 处 理 ， 从 而 避免 单线 程 执 行 缓慢 的 问题 。 后 


台 程 序 不 仅 可 以 被 前 台 


叫 ) 8.4.1 Worker 对 和 象 简介 


HIML5 中 新 增 的 用 来 在 Web 应 用 程序 中 实现 后 台 处 理 的 一 项 技术 。 
间 长 、 中 断 执行 的 处 理 及 长 时 间 无 反应 的 情况 ，HTMLS5 也 增 
用 户 使 用 此 API 可 以 很 容易 地 创建 后 台 运 行 的 线程 (HTML5 中 被 称 为 


Worker 对 象 是 
为 了 解决 之 前 版 本 中 耗费 时 


加 了 Worker API， 


调用 ， 而 且 还 可 以 在 后 合 程序 中 调用 子 线程 和 广 套 线程 。 


worker) 。 这 样 如 果 将 可 能 耗费 较 长 时 间 的 处 理 交 给 后 台 执 行 ， 对 用 户 在 前 合 页面 中 执行 的 操 


作 就 不 会 受到 影响 。 


Worker 进程 能 够 在 不 影响 用 户 界 面 的 情况 下 处 理 任务 ， 并 且 可 以 使 用 et 


来 处 理 IJO。 它 也 为 Web 前 


端 网 页 上 的 脚本 提供 了 一 种 能 在 后 台 进 程 中 运行 的 方法 。 


且 Worker 被 创建 ， 就 可 以 通过 postMessage() 向 任务 池 发 送 任 务 请 求 ， 执 行 完 之 后 再 通过 


postMessage() 返回 
创建 后 全 线程 
文件 的 URL 即 可 。 


消息 给 创建 者 指定 


的 步骤 非常 简单 。 


的 事件 处 理 程序 。 
只 需 在 Worker 类 的 构造 函数 中 传 入 需要 后 台 执 行 的 脚本 


下 面 使 用 myscriptjs 文件 作为 后 合 线程 创建 Work 对 象 。 


var worker = new Worker("myscript.js"); 


worker.postMessage!(); 


上 述 代码 中 使 用 myscriptjs 文件 创建 了 一 个 名 为 worker 的 后 台 线 程 ， 创 建 该 对 象 完成 后 
调用 post Message() 方法 向 后 合 线程 发 送 文本 格式 的 数据 。 


-人 注意 - -一 一 一 一 一 一 一 一 一 一 一 一 - 


在 后 台 线 程 中 是 不 能 访问 页 面 或 窗口 对 象 的 ， 如 果 在 后 台 线 程 的 脚本 文件 中 使 用 window 对 象 | 

l 或 document 对 象 则 会 发 生 错 误 。 
为 了 在 前 合 接收 后 台 线 程 返 回 

该 事件 用 于 捕获 后 合 线程 返回 的 数据 ， 其 调用 格式 如 下 : 


的 数据 , 需要 在 定义 Worker 对 象 后 添加 一 个 message 事件 ， 


worker.addEventListener("message",function(event){ 


alert(event.data); 


庆 省 略 其 他 代码 的 显示 */ 


bfalse) 


// 后 台 处 理 完成 后 返回 到 前 台 的 数据 
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图 8-8 所 示 为 Worker 对 象 的 简单 操作 流程 。; Ee 
在 了 解 如 何 创建 和 使 用 Worker 对 象 之 : 

后 ， 下 面 通过 一 个 案例 演示 Worker 对 象 的 具 ， | 

体 应 用 。 二 
【 例 8-4]】 | 成 功 与 否 一 > Workerone 
本 案例 中 的 页 面 加 载 时 创建 一 个 Worker ， 上 

后 台 线 程 ， 当 输入 内 容 完成 后 单 击 按钮 向 后 

台 线 程 发 送 输入 内 容 ， 后 台 线 程 将 数据 处 理 ， tf 的 主 各 

完成 后 返回 前 合 调用 并 输入 消息 。 实 现 该 功 

能 的 具体 步骤 如 下 。 上- 
四 和 添加 新 的 HTML 页 面 ， 在 页 面 的 合 

适 位 置 添加 textarea 元 素 、input 元 素 和 div : 2 

元 素 等 。 具 体 代码 如 下 : | 图 8-8 ”Worker 对 象 的 操作 流程 


<div class="media"> 
<div class="media-body"> 
<div class="yh_fix1a_txt"> 
<div class="yh_fix1a_txt2"><span></span></div> 
<textarea class="yh_fixla_txt1 form-control" id="textarea" ></textarea> 
</div> 
</div> 
<div class="media-right"> 
<button class="btn btn-success" onClick="btnSend();" type="button"> 发 送 </button> 
</div> 
</div> 
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<div id="ret"> </div> 


加 允 在 JavaScript 中 首先 判断 浏览 器 是 否 | } 
支持 Worker 对 象 ， 如 果 支 持 则 直接 创建 该 对 | else 
象 ， 如 果 不 支持 弹出 提示 。 具 体 代码 如 下 ; 。 
| alert(" 该 浏览 器 不 支持 Web Worker"); 
var objWorker; : } 
if(typeof(Worker)!=="undefined") : 
{ | 硬结 单 击 “ 发 送 ” 按 钮 时 触发 该 按钮 的 
objWorker = new Worker("js/comment.js"); | onclick 事件 调用 btnSend0 函数 ， 该 函数 的 
; 具体 代码 如 下 : 
function btnSend() 
{ 
var content = document.getElementByld("textarea").value; // 评论 内 容 
objWorker.postMessage(content); // 发 送信 息 
uy 


上 述 代码 首先 获取 用 户 输入 的 评论 内 容 ， 然 后 调用 objWorker 对 象 的 postMessage() 方法 
发 送 内 容 。 
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GD 创建 名 称 为 commentjs 的 文件 ， 在 该 文件 中 接收 页 面 传 过 来 的 内 容 。 该 文件 中 的 具 
体 代码 如 下 : 


onmessage = function(event){ 
var datas = event.data; // 获取 从 页 面 传 入 的 数据 
var html='<div class="yh_c6_box">'+ 

'<div class="media yh_c6a yh_c6b">'+ 
'<div class="media-left">'+ 
'<img src="images/yh629_pl.jpg” />'+ 
'<span class="yh_span1"> 群众 </span>'+ 
'</div>'+ 
'<div class="media-body">'+ 
'<p class="yh_c6a_p1 clearfix"> 匿名 用 户 </p>'+ 
'<p class="yh_c6_p2">'+datas+'</p>'+ 
‘</div>'+ 
‘</div>'+ 
‘</div>'; 

postMessage(html); 


上 述 代码 首先 调用 event 对 象 的 data 对 象 获 取 从 页 面 传 入 的 数据 ， 然后 调用 
postMessage() 方法 将 保存 到 html 变量 中 的 内 容 返 回 到 上 个 页 面 。 

加 号 调用 postMessage() 方法 时 会 触发 onmessage 事件 ， 在 页 面 中 通过 objWorker 对 象 的 
该 事件 来 获取 信息 并 接收 ， 最 后 将 内 容 显 示 到 div 元 素 中 。 具 体 代码 如 下 : 


objWorker.onmessage = function(event) 


{ 


document.getElementByld("ret").innerHTML = event.data; 


} 
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OB) 输入 内 容 后 单 击 “ 发 送 ”按钮 查看 效果 ， 最 终 运 行 效果 如 图 8-9 所 示 。 


同 就 


就 是 有 个 性 
了 无 赦 个 周而复始 


图 8-9 案例 运行 效果 
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咱 》8.4.2 ”线程 和 JavaScript 交互 
线程 中 可 以 使 用 JavaScript 脚本 文件 ， 表 8-3 列 出 了 在 线程 中 可 用 的 变量 、 方 法 与 类 。 
表 8-3 ”线程 中 可 用 的 变量 、 方 法 与 类 


文件 名 称 说 明 
self 该 关键 字 用 来 表示 本 线程 范围 内 的 作用 域 
postMessage(message) 向 创建 线程 的 源 窗口 发 送 消 息 
区 onmessage 获取 接收 消息 的 事件 句柄 
importScript(urls) 导入 其 他 JavaScript 脚本 文件 ， 参 数 为 脚本 文件 的 URL 地 址 
到 i 与 window.navigator 对 象 类 似 ， 包 含 appName、userAgent 和 appVersion 
FH 等 属性 
有 sessionStorage 和 localStorage | 可 以 在 线程 中 使 用 主 Web Storage 
6 XMLHttpRequest 可 以 在 线程 中 处 理 请 求 
0 Web Workers 可 以 在 线程 中 谋 套 线程 
0 setTimeout 和 setInterval 在 线程 中 实现 定时 处 理 
2 close() 结束 本 线程 
< eval()、escape() 和 isNaN0 等 可 以 使 用 JavaScript 的 核心 函数 
(0 object 可 以 创建 和 使 用 本 地 对 象 
3 WebSockets 可 以 使 用 WebSocket API 向 服务 器 发 送 和 接收 消息 
5 
rm 


对 由 多 个 JavaScript 文件 组 成 的 应 用 程序 来 说 ， 可 以 通过 包含 script 元 素 的 方式 在 页 面 加 
载 时 同步 加 载 JavaScript 文件 。 但 是 由 于 Worker 没有 访问 document 对 象 的 权限 ， 所 以 必须 
通过 importScripts 导入 其 他 的 JavaScript 文件 ， 其 使 用 方法 如 下 : 


importScripts("mycontent.js"); 
可 以 使 用 importScripts 导入 多 个 脚本 文件 ， 它 们 会 按照 顺序 执行 。 例 如 ， 下 面 的 代码 会 
依次 导入 mycontentjs 和 login.js。 


importScripts("mycontent.js","login.js") 


'() 8.4.3 线程 该 套 


上 一 节 已 经 介绍 了 如 何 使 用 后 台 进 程 分 割 处 理 前 人 台 JavaScript 代码 的 方法 ， 其 实在 线程 
中 还 可 以 找 套 子 线程 ， 这 样 可 以 把 一 个 较 大 的 后 合 线程 切割 成 几 个 子 线程 ， 在 每 个 子 线程 中 
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[ 作 。 这 种 方法 可 以 将 各 功能 模块 进行 分 离 ， 形 成 独立 的 子 模块 ， 


各 自 完成 相对 独立 的 一 部 分 了 


有 利于 Web 应 用 的 开发 。 


【 例 8-5】 

在 本 案例 中 随机 生成 100 个 数字 ， 然 后 找 出 能 被 3 整除 的 数字 并 将 它们 显示 到 页 面 ， 实 
现 的 主要 步骤 如 下 。 

加 中 创建 一 个 index.html 作为 主页 面 ， 并 添加 以 下 代码 到 布局 中 。 


<h1> 从 随机 生成 的 100 个 数字 中 抽取 3 的 倍数 </h1> 
<table id="table"> 


</table> 


0 多 创建 使 用 scriptl.jjs 文件 的 Worker 对 象 ， 在 onMessage 事件 中 接收 线程 返回 的 数据 ， 


并 对 数据 进行 组 合 后 显示 到 表格 中 。 具 体 代码 如 下 : 


<script type="text/javascript"> 

var worker = new Worker("script1.js"); 

‘worker.postMessage(""); 

// 从 线程 中 取得 计算 结果 

workeronMessage = function(event) { 
if(event.data!="") 


{ 
varj; // 行 号 
var k; // 列 号 
var tr; 
var td; 


var intArray=event.data.split(";"); 
var table=document.getElementByld("table"); 
for(var i=0;i<intArray.length;i++) 


{ 
j=parselnt(i/10,0); 
k=i%10; 
if(k==0) // 该 行 不 存在 
{ 
// 添加 行 
tr=document.createElement("tr"); 
tr.id="tr"+j; 
table.appendChild(tr); 
上 
else // 该 行 已 存在 
{ 
// 获取 该 行 
tr=document.getElementByld("tr"+j); 
} 
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i 该 文件 为 主线 程 的 子 线程 。 该 线程 在 接收 到 
; 的 随机 数组 中 挑选 出 能 被 3 整除 的 数字 ， 然 
; 后 拼接 成 字符 串 并 返回 。 该 文件 的 具体 代码 
| 如 下 : 


// 添加 列 
td=document.createElement("td"); 
tr.appendChild(td); 

// 设置 该 列 内 容 
td.innerHTML=intArray[j*10+k]; 


onmessage = function(event) { 


Ws | // 还 原 整数 数组 
Wo width So. | var intArray= JSON.parse(event.data); 
} | var returnStr; 
区 } : returnStr=""; 
} . | for(var i=0;i<intArray.length;i++) 
一 </script> | { 
天。 8 创建 名 称 为 seriptljs 的 脚本 文件 ， 人 
加 该 文件 为 主页 面 的 主线 程 。 在 主线 程 中 随机 Ph ti 
图 生成 一 个 包含 100 个 数字 的 数组 ， 然 后 把 该 ， | 
区 组 提交 到 了 线程 。 在 子 线 得 中 把 能 被 3 整 a 
除 的 数字 挑选 出 来 ， 然 后 送 回 主线 程 ， 主 线 ; > 
天 程 再 把 挑选 结果 送 回 页 面 进行 显示 。 该 文件 | 各。 守 辽 各 忆 扩 人 以 
的 具体 代码 如 下 : mm 
5 本 “ | returnStr+=intArray[i]; 
CC onmessage=function(event){ } 
2 var intArray=new Array(100); : } 
EF*b] // 随机 数组 | // 返回 拼接 字符 串 
// 生成 100 个 随机 数 | pode ernst 
=, for(var i=0;i<100;i++) | // 关闭 子 线程 
Ee) intArray[i]=parselnt(Math. : close(); 
5 random()*100); | } 
var worker; : Es We TN 
worker=new Worker("script2.js"); | 的 最 终 运行 效果 如 图 8-10 所 示 。 
// 把 随机 数组 提交 给 子 线程 进行 挑选 : en 
workerpostMessage(JSON.stringify(intArray)); | | (€) 5 canon 号 最 e | [aaan | 容 | 自 » 二 
| 从 随机 生成 的 100 个 数字 中 抽取 3 的 信 数 
postMessage(levent.data); | 汪 3 加 胡 2 9 
} 和 
} :| 
用 双 创建 名 称 为 script2js 的 脚本 文件 ， 图 8-10 线程 谋 奏 交互 数据 的 运行 效果 


川 )》 8.4.4 ”实践 案例 : 线程 和 JSON 交互 


除了 线程 可 以 处 理 一 般 数 据 外 ， 还 可 以 传递 JSON 对 象 进行 处 理 ， 即 可 以 通过 后 合 线程 
传递 一 个 JSON 对 象 给 前 合 ， 前 全 接收 并 显示 对 象 中 的 内 容 。 
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本 案例 在 页 面 加 载 时 创建 一 个 Worker 后 台 线 程 ,该 线程 返回 给 前 台 页 面 一 个 JSON 对 象 ， 
然后 在 前 台 获 取 该 JSON 对 象 ， 使 用 遍历 的 方式 显示 对 象 中 的 内 容 。 实 现 本 案例 的 具体 步骤 
如 下 。 

办 创建 一 个 HIMLS 页 面 。 在 页 面 的 合适 位 置 添加 id 为 ret 的 div 元 素 ， 该 元 素 用 于 显 
示 JSON 对 象 中 的 所 有 内 容 。 相 关 代码 如 下 : 


<header class="yh_head1"> 
<div class="yh_head1a yh_head1b clearfix"> 
<p><a href="#" class="on"> 姓名 /行业 </a></p> 
<p><a href="#"> 供应 </a></p> 
<p><a href="#"> 需求 </a></p> 
</div> 
</header> 
<div class="yh_c3" id="ret"> 
<p class="yh_c6_more"> 已 加 载 全 部 内 容 </p> 


</div> 
四 多 页 面 加 载 时 首先 判断 浏览 器 是 否 支 } } 
持 Worker 对 象 ， 如 果 不 支持 弹出 提示 ， 如 果 | { 
支持 则 直接 创建 该 对 象 并 调用 postMessageO | "name":" 刘 梓 硬 "， 
方法 发 送 消息 。 具 体 代 码 如 下 : : "company": " 向 阳 电 子 科技 "， 
| "position": " 市 场 部 经 理 " 
var objWorker; : i 
if(typeof(Worker)!=="undefined") | 1 
{ | "name":" 陈 瑞 华 "， 
objWorker = new Worker("js/json.js"); : "company":" 锐志 祥 通 科技 "， 
objWorkerpostMessagel); : "position": " 技术 部 经 理 " 
} | » 
else | { 
{ | "name":" 高 百丽 "， 
alert(" 该 浏览 器 不 支持 Web Worker"); : "company":" 百丽 电子 商务 
} | "position": " 技术 部 经 理 " 
二 TE | } 
四 8) 添加 名 称 为 jsonjs 的 脚本 文件 , 在 
该 文件 中 声明 变量 json, 然后 在 Qnmessage 事 | self.onmessage = function(event){ 
件 中 调用 postMessage0 方法 将 该 变量 传 入 上 : Dr 
一 个 页 面 中 。 该 文件 的 具体 代码 如 下 : me 
er 过 于 出 下 添加 objWorker 对 象 的 onMessage 


事件 ， 然 后 在 该 事件 中 通过 for 语句 遍历 显 
; 示 JSON 对 象 中 的 内 容 ， 并 显示 到 id 名 称 为 
ret 的 div 元 素 中 。 该 事件 的 具体 代码 如 下 : 


"name":" 张 浩 太 "， 
"company": " 糖果 网 络 科 技 ", 
"position": " 市 场 部 经 理 " 
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objWorker.onMessage = function(event) 


{ 
var strHTML = ""; 
Var ev = event.data; 
for(var i in ev) 
{ 
var item = ev[i]; 
strHTML +='<div class="media">'+ 
'<div class="media-body">'+ 
'<p class="yh_c3_p1 clearfix"><span>'+item.position+'</span><em>'+item.name+ 
'</em></p>'+ 
'<p class="yh_c3_p1">'+item.company+'</p>'+ 
‘</div>'+ 
‘</div>'; 
} 
document.getElementByld("ret").innerHTML = strHTML; 
} 


四 中 运行 本 案例 进行 测试 ， 页 面 的 最 终 运行 效果 如 图 8-11 所 示 。 


姓名 /行业 供应 
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图 8-11 多 线程 处 理 JSON 数据 的 运行 效果 


7 8.5 获取 地 理 位 置 


HIML5S 新 增加 了 Geolocation API 接口 获取 地 理 位 置 ， 它 允许 用 户 在 Web 应 用 程序 中 共 
享 它 们 的 位 置 ， 使 其 能 够 享受 位 置 感知 服务 。 地 理 位 置信 息 的 来 源 有 经 度 、 纬 度 和 其 他 特性 ， 
获取 这 些 数据 的 途径 有 GPS、Wi-Fi 和 蜂窝 站 点 等 。 
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下 面 详细 介绍 HTML5 使 用 Geolocation API 接口 获取 地 理 位 置 的 方法 。 


咱 ) 8.5.1 地 图 API 简介 


HTML5 为 window.navigator 对 象 增加 了 一 个 Geolocation 属性 ， 该 属性 返回 一 个 
Geolocation 对 象 。 调 用 Geolocation 对 象 提 供 的 方法 ， 即 可 获取 位 置信 息 。 
在 使 用 之 前 可 以 检测 浏览 器 是 否 支 持 Geolocation 对 象 ， 代 码 如 下 : 


function checkDemo(){ 
if(navigator.geolocation){ 
alert(" 支持 HTML 5 Geolocation 对 象 。"); 
jelse{ 
alert(" 不 支持 HTML 5 Geolocation 对 象 。")); 
} 
} 


Geolocation 对 象 常用 的 方法 有 getCurrentPosition() 方法 、watchCurrentPosition() 方法 和 
clearWatch() 方法 。 
WY getCurrentPosition() 方法 
getCurrentPosition() 方法 可 以 获取 用 户 当 前 的 地 理 位 置信 息 ， 该 方法 的 语法 形式 如 下 : 
window.navigator.geolocation.getCurrentPosition(onSuccressCallback,onErrorCallback,options); 
getCurrentPosition() 方法 有 3 个 参数 ， 第 一 个 参数 用 于 成 功 获取 当前 地 理 位 置 时 的 
回调 函数 ， 该 函数 需要 传 入 形 参 对 象 position， 该 对 象 在 下 一 节 介绍 ， 第 二 个 参数 用 于 
获取 当前 地 理 位 置 失败 时 的 回调 函数 ， 第 三 个 参数 是 一 个 可 选择 的 对 象 ， 表 示 一 些 属性 
内 容 。 
EY watchcurrentPosition() 方法 


watchCurrentPosition() 方法 用 于 持续 获取 用 户 当 前 的 地 理 位 置信 息 ， 它 会 定期 地 自动 获 
取 。 该 方法 的 语法 形式 如 下 : 


int watchCurrentPosition(onSuccessCallback,onErrorCallback,options); 
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watchCurrentPosition() 方法 有 3 个 参数 ， 各 参数 的 含义 和 使 用 方法 与 getCurrentPosition() 
方法 相同 。watchCurrentPosition() 方法 的 返回 值 是 一 个 数字 ， 该 数字 可 以 被 clearWatch() 方法 
使 用 ， 表 示 停 止 对 当前 地 理 位 置信 息 的 监视 。 


大 Jearwatch(0 方法 
clearWatch() 可 以 停止 对 当前 用 户 的 地 理 位 置信 息 的 监视 ， 其 语法 形式 如 下 : 


void clearWatch(watchld); 


使 用 该 方法 时 需要 向 该 方法 传递 形 参 ， 它 的 值 为 调用 watchCurrentPosition() 方法 监视 地 
理 位 置信 息 时 的 返回 参数 。 
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叫 ) 8.5.2 ”Position 对 象 


无 论 是 Geolocation 对 象 的 getCurrentPosition() 方法 还 是 watchCurrentPosition() 方法 都 需 
要 传 入 一 个 调用 成 功 后 的 回调 函数 作为 参数 。 该 回调 函数 可 以 使 用 Position 对 象 有 关 的 属性 
显示 当前 位 置信 息 。 
了 Position 对 象 包含 两 个 重要 属性 : timestamp 和 coords。timestamp 属性 表示 获取 地 理 位 置 
时 的 时 间 ， 而 coords 属性 则 包含 多 个 属性 值 ， 其 具体 说 明 如 表 8-4 所 示 。 
表 8-4 coords 属性 所 包含 的 值 


值 名 称 说 明 


accuracy 当前 地 理 位 置 的 精确 度 
latitude 当前 地 理 位 置 的 纬度 
longitude 当前 地 理 位 置 的 经 度 
altitude 当前 地 理 位 置 的 海拔 高 度 


altitudeAccurancy | 当前 地 理 位 置 的 海拔 精确 度 〔 单 位 : 米 ) 


当前 设置 的 前 进 方向 ， 用 面 朝 正 北方 向 的 顺 时 针 旋 转角 度 来 表示 。 无 法 获取 时 
返回 值 为 null 


speed 当前 设置 的 前 进 速度 ， 以 米 / 秒 为 单位 ， 无 法 获取 时 返回 值 为 null 


heading 


【 例 8-6】 
下 面 创建 一 个 示例 演示 如 何 通 过 Position 对象 的 相关 属性 获取 用 户 当 前 的 地 理 位 置信 息 ， 
实现 该 功能 的 步骤 如 下 。 
添加 新 的 HIML 页 面 ， 在 页 面 的 合适 位 置 添加 span 元 素 ， 该 元 素 显 示 详 细 的 地 理 
页 面 的 具体 代码 如 下 : 


<span id="ShowMessage"></span> 


大 多 页 面 加 载 时 调用 initO 函数 自动 获取 信息 ， 该 函数 的 具体 代码 如 下 : 
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Mm 
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信息 


function init() 


{ 
if(navigator.geolocation) // 判断 浏览 器 是 否 支持 
[ 
navigator.geolocation.getCurrentPosition( 
handle_getinfo, // 成 功 时 调用 的 函数 
handle_error, // 失败 时 调用 的 函数 
{ // 其 他 属性 信息 的 设置 
maximumAge:5*1000*60, // 缓存 有 效 时 间 
timeout:5000 // 超时 时 间 限制 
} 
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jelse{ 
alert(" 浏览 器 不 支持 当前 位 置 的 显示 功能 "); 
} 
} 
window.addEventListener("load",init,true); // 页 面 加 载 时 调用 init() 事件 


上 述 代 码 首 先 判 断 浏览 器 是 否 支持 显示 当前 位 置 的 功能 ， 如 果 支 持 成 功 时 调用 handle_ 
getInfo() 函数 ， 失 败 时 调用 handle_error( 函数 且 设 置 其 他 属性 的 相关 信息 。 

大 中 handle_getInfo() 函数 在 成 功 时 才 执 行 ， 在 该 函数 中 传递 一 个 Position 对 象 ， 然 后 调 
用 该 对 象 的 相关 属性 显示 详细 内 容 ， 其 具体 代码 如 下 : 


function handle_getlnfo(position) 

{ 
var strHTML = ""; 
var objlnfo = position.coords; 
strHTML +=" 当前 位 置 的 纬度 值 : <b>" + objlnfo.latitude + "</b><br/>"; 
strHTML+= " 当前 位 置 的 经 度 值 ， <b>" + objlnfo.longitude + "</b><br/>"; 
strHTML += " 当前 位 置 的 精确 度 : <b>" + objlnfo.accuracy + "</b><br/>"; 
strHTML += " 当前 位 置 的 前 进 速 度 : <b>" + objlnfo.speed + "</b><br/>"; 
strHTML+= " 当前 位 置 的 前 进 方向 : <b>" + objlnfo.heading + "</b><br/>"; 
strHTML += " 当前 位 置 的 时 间 戳 : <b>" + objlnfo.timestamp + "</b><br/>"; 
document.getElementByld("ShowMessage").innerHTML = strHTML; 

} 


上 述 代码 首先 声明 全 局 变量 stHITML 保存 要 显示 的 内 容 ， 接 着 调用 coords 属性 的 多 个 属 
性 值 分 别 显示 经 度 值 、 纬 度 值 、 精 确 度 、 前 进 速度 和 前 进 方向 等 ， 然 后 直接 调用 Position 对 
象 的 timestamp 属性 显示 时 间 戳 ， 最 后 将 变量 中 的 内 容 显示 到 id 为 ShowMessage 的 span 元 
素 中 。 

大 鸡 handle_error0 函数 在 失败 时 才 会 执行 ， 在 该 函数 中 传递 一 个 error 对 象 ， 然 后 根据 
code 属性 的 值 判断 显示 不 同 的 内 容 ， 其 具体 代码 如 下 : 
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function handle_error(error) 


{ 
switch(error.code){ // 获取 code 属性 的 值 
case 0: 
alert(" 出 现 了 未 知 的 错误 ! "); 
break; 
Case 1: 


alert(" 位 置 服务 被 拒绝 "); 
break; 
Case 2: 
alert(" 暂时 获取 不 到 位 置信 息 "); 
break; 


Case 3: 
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alert(" 获取 信息 超时 "); 
break; 


} 


四 加 运行 本 案例 的 代码 进行 测试 ， 页 面 的 最 终 效果 如 图 8-12 所 示 。 


< © (localhost/Blog8.html 合 六 四 儿 国 = 


要 ， 人 还 还 有 春风 ， 过 有 和 二， 有 撤 洁 的 月 华 ， 还 有 灿烂 的 星 辉 …… 世 间 杀 少 
江河 心 灵 的 美好 风物 ， 都 是 免责 的 只 

再 不 要 对 着 苍天 哑 声 叹气 ! 苍天 是 公正 的 ， 更 是 慷慨 的 ; 苍天 早已 把 最 珍贵 的 一 切 ， 
免责 地 清 赠 给 了 每 一 个 人 。 


访客 位 置信 息 


当前 位 置 的 纬度 值 : 34- 7466 
当前 位 置 的 经 度 值 ; 113. 625368 
当 : 18000 


图 8-12 显示 地 理 位 置 的 详细 内 容 


9) 8.6 练习 题 


一 、 填 空 题 

1. window.navigator 属性 包含 3 个 方法 ， 方法 可 以 获取 用 户 当前 的 地 理 位 置 。 

2. HTML5 中 实现 跨 域 页 面 间 的 数据 互 访 需 要 调用 对 象 的 方法 。 

3. dataTransfer 对 象 的 方法 可 以 为 元 素 添加 指定 的 数据 。 

二 、 选 择 题 

下 面 选项 中 ， 说 法 “是 正确 的 。 

postMessage() 方法 只 能 实现 跨 域 页 面 间 的 数据 访问 功能 ， 其 他 访问 功能 不 能 调用 

获取 地 理 位 置 时 ，Position 对 象 的 latitude 属性 表示 获取 当前 位 置 的 经 度 

getCurrentPosition() 方法 中 包含 3 个 参数 ， 这 3 个 参数 都 是 必 不 可 少 的 

Rao 方法 中 包含 3 个 参数 ， 最 后 一 个 参数 表示 部 分 属性 内 容 ， 可 以 省 略 
全 线程 调用 postMessage() 方法 发 送 数据 后 ， 前 合 页 面 会 触发 message 事件 ， 并 且 

ww 的 数据 。 下 段 代码 空白 处 应 该 填写 
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Hd 


worker.addEventListener("message",function(event){ 
var content = // 后 台 处 理 完成 后 返回 到 前 台 的 数据 
bfalse); 
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。e.Imessage 
。 event.message 
。event.data 
e.data 


. dragend 

drop 

. dragstart 
. dragover 


DNWP>HONWP 


成 功 获取 用 户 地 理 位 置信 息 后 ， 调 用 Position 对 象 的 


4. 
理 位 置 的 精确 度 。 
. altitudeAccurancy 
B. accuracy 
C. latitude 
D. longitude 


> 


< 上 机 练习 1: 拖 动 图 片 到 指定 位 置 


目标 元 素 完全 接收 被 拖 放 元 素 时 触发 的 事件 是 
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属性 可 获取 当前 地 


添加 新 的 HIML 页 面 ， 在 该 页 面 中 添加 代码 ， 以 达到 将 图 书 拖 动 到 指定 位 置 的 效果 。 


户 拖 动 时 的 效果 如 图 8-13 所 示 ， 拖 动 完成 后 的 效果 如 图 


8-14 所 示 。 


图 8-13 拖 动 时 的 运行 效果 


图 8-14 拖 动 完成 后 的 效果 
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LX 上 机 练习 2: 多 线程 计算 器 

根据 本 章 学 习 的 知识 制作 一 个 多 线程 的 计算 器 。 要求: 用户 可 以 在 页 面 上 输入 要 计算 的 


两 个 操作 数 , 然后 选择 要 执行 的 操作 , 最 后 显示 计算 结果 , 同时 可 以 进行 停止 以 及 清空 等 操作 。 
示例 的 参考 运行 效果 如 图 8-15 所 示 。 


癌 基本 示例 x 
< CC OD localhost 


的 浏览 器 支持 Web Worker 


10+10=20 
10*10=100 
20+20=40 
20*20=400 


|L 相 加 | | 相 乘 | | 停止 线程 | | 


图 8-15 多 线程 计算 器 效果 
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CSS3 是 CSS (Cascading style Sheet， 层 玲 样 式 表 ) 技术 的 升级 版 ，CSS3 语言 是 朝 着 
模块 化 方向 发 展 的 。 以 前 的 规范 作为 一 个 模块 实在 太 庞大 而 且 比较 复杂 ， 所 以 ， 把 它 分 解 为 
一 些小 的 模块 ， 更 多 新 的 模块 也 被 加 入 进来 。 这 些 模 块 包括 选择 器 、 盒 子 模型 、 列 表 模 块 、 
超 链 接 方式 、 语 言 模块 、 背 景 和 边框 、 文 字 特 效 、 多 栏 布局 、 书 写 模 式 、 计 算 器 风格 等 。 

C553 可 以 使 用 新 的 可 用 的 选择 器 和 属性 ， 从 而 实现 新 的 设计 效果 (例如 动态 和 渐变 ) ， 
而 且 可 以 很 简单 地 设计 出 多 种 布局 效果 (例如 使 用 分 栏 ) 。CS53 将 完全 向 后 兼容 。 本 章 主要 
介绍 C553 中 新 增 的 选择 器 。 


\ A239 本 章 学 习 要 点 
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Q)) 9.1 CSS 选择 器 的 分 类 


如 果 想 用 CSS 层 和 样式 表 对 HTML 页 面 | me 
中 的 元 素 实现 一 对 一 、 一 对 多 或 多 对 一 的 控 ; 
制 ， 就 需要 用 到 CSS 选择 器 。HTML 页 面 中 ; 见 的 CSS 选择 器 是 元 素 选择 器 。 换 
的 元 素 就 是 通过 CSS 中 的 选择 器 进行 控制 的 。 句 话说， 文档 元 来 就 是 最 基本 的 选择 器 。 如 
在 CSS 中 ， 选 择 器 是 一 种 模式 ， 用 于 选择 需 ， 果 设置 HIML 的 样式 ， 选 择 器 通常 是 某 个 
要 添加 样式 的 元 素 。 | HTML 元 素 ， 例如 p、hl、em、a， 甚 至 可 以 
通常 情况 下 ，CSS 中 的 选择 器 可 以 分 为 | 是 hunl 本 身 。 
元 素 选 择 器 、 属 性 选择 器 、 伪 类 选择 器 ， 伪 。 。” 表 91 列 出 了 CSS 中 的 元 素 选 择 器 。 
对 象 选择 器 以 及 关系 选择 器 。 | 


表 9-1 CSS 中 的 元 素 选择 器 及 其 说 明 
EE CC ET TET 
类 型 选择 器 ， 以 文档 语音 对 象 作为 选择 器 
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Efmyid [css! | ID 选择 器 ， 以 唯一 标识 符 id 属性 等 于 myid 的 下 元 素 作为 选择 器 
【 例 9-1】 h2 {color:silver;} 
直接 通过 HTML 元 素 为 网 页 的 元 素 设置 
样式 ， 元 素 选择 器 的 使 用 如 下 : | E 开 属性 选择 顺 
html fcolorblacke | 属性 选择 器 可 以 根据 元 素 的 属性 及 属性 
ha {color:blue;} ， 值 来 选择 元 素 。 在 CSS2 中 引入 了 属性 选择 器 。 
h2 {color:silver;} ; 如 果 希 望 选择 有 某 个 属性 的 元 素 ， 而 不 论 属 


”性 值 是 什么 , 可 以 使 用 简单 属性 选择 器 。 当 然 ， 
用 户 可 以 将 某 个 样式 从 一 个 元 素 切换 到 ;用 户 除了 选择 拥有 某 些 属性 的 元 素 ， 还 可 以 
一 个 元 素 。 如 果 用 户 需要 将 上 面 的 段落 文 “进一步 缩小 选择 范围 ， 只 选择 有 特定 属性 值 
本 《而 不 是 hl 元 素 ) 设置 为 灰色 。 只 需要 把 的 元 素 。 
hl 选择 器 改 为 p 即 可 。 | CSS 中 的 属性 选择 器 及 其 说 明 如 表 9-2 
| 所 示 。 从 表 9-2 中 可 以 看 出 ,与 CSS 2 相 比 ， 
| CSS3 中 新 增加 了 3 个 属性 选择 器 。 


html {color:black;} 


p {color:gray;} 
表 9-2 CSS 中 的 属性 选择 器 及 其 说 明 
选择 器 版 本 说 明 
E[att] CSS2 选择 具有 att 属性 的 下 元 素 
Elatt="val"] CSS2 选择 具有 att 属性 且 属 性 值 等 于 val 的 元 素 
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( 续 表 ) 
选择 器 版 本 说 明 
Efatt——"val"] CoS 选择 具有 att 属性 且 属 性 值 为 一 个 用 空格 分 隔 的 字 词 列表 ， 即 属 
性 等 于 val 的 下 元 素 
Efattj="val"] CR 选择 具有 att 属性 且 属性 值 为 以 val 开头 并 用 连接 符 “-” 分 隔 的 
字符 囊 的 下 元 素 ， 如 果 属 性 值 仅 为 val， 也 会 被 选择 
El[att*="val"] CSS3 选择 具有 att 属性 且 属 性 值 为 以 val 开头 的 字符 事 的 下 元 素 
El[att$="val"] CSS3 选择 具有 att 属性 且 属 性 值 为 以 val 结尾 的 字符 事 的 下 元 素 
Elatt*="val"] CSS3 选择 具有 att 属性 且 属 性 值 为 包含 val 的 字符 事 的 下 元 素 
【 例 9-2】 i 配 到 第 一 行 代码 ， 因 为 匹配 到 了 type 属性 ， 
以 下 代码 演示 了 EIatr val] 选择 器 的 | 其 属性 值 为 text。 
使 用 。 
<input type="text" /> 
<style> <input type="submit" /> 


input[type="text"] { 
border: 2px solid #000; 


} 
</style> 


上 述 代码 指定 


定 了 type 类 


类 型 为 text 的 input : 


基 伪 类 选择 器 
: 伪 类 选择 器 可 以 设置 一 些 特殊 的 效果 。 
| 常见 的 E:link、E:visited、E:hover、E:active、 
; E:focus 等 。 除 了 这 些 之 外 ，CSS3 又 新 增加 


元 素 的 border 属性 值 ， 即 指定 了 文本 输入 框 | 了 多 种 伪 类 选择 器 ， 如 表 9-3 所 示 。 
的 边框 样式 。 对 以 下 两 行 代码 而 言 ， 仅 能 匹 | 
表 9-3 CSS 中 的 伪 类 选择 器 及 其 说 明 


选择 器 版 本 说 明 
E:link CSS1 设置 超 链接 a 未 被 访问 前 的 样式 
E:visited CSS1 设置 超 链接 a 被 访问 过 的 样式 
E:hover CSSICSS2 | 设置 元 素 在 和 扎 标 悬 停 时 的 样式 
E:active CSSICSS2 | 设置 元 素 被 激活 〈 在 鼠标 单 击 与 释放 之 间 发 生 的 事件 ) 时 的 样式 
E:focus CSSICSS2 | 设置 元 素 成 为 输入 焦点 〈 该 元 素 的 onfocus 事件 发 生 ) 时 的 样式 
E:lang(fr) CSS2 匹配 使 用 特殊 语言 的 下 元 素 
E:first-child CSS2 匹配 父 元 素 的 第 一 个 子 元 素 玉 
@page:first CSS2 设置 页 面容 器 第 一 页 使 用 的 样式 ， 仅 用 于 @page 规则 
@page-left ey amor 面 使 用 的 样式 ， 仅 用 于 @ 
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( 续 表 ) 
人 eb 设置 页 面容 器 位 于 装订 线 右边 的 所 有 页 面 使 用 的 样式 ， 仅 用 于 @ 
page 规则 
E:not(s) CSS3 匹配 不 含有 s 选择 器 的 元 素 下 
E:root CSS3 匹配 王 元素 在 文档 的 根 元 素 
也 E:last-child CSS3 匹配 父 元 素 的 最 后 一 个 子 元 素 下 
E:only-child CSS3 匹配 父 元 素 仅 有 的 一 个 子 元 素 玉 
nn E:nth-child(n) CSS3 匹配 父 元 素 的 第 了 个子 元 素 忆 
= E:nth-last-child(n) | CSS3 匹配 父 元 素 的 倒数 第 D 个 子 元 素 下 
三 
E:first-of-type CSS3 匹配 同类 型 中 的 第 一 个 同 级 兄弟 元 素 玉 
汉 E:last-of-type CSS3 匹配 同类 型 中 唯一 的 一 个 同 级 兄弟 元 素 下 
(0 E:only-of-type CSS3 匹配 同类 型 中 唯一 的 一 个 同 级 兄弟 元 素 下 
0 E:nth-of-type(n) CSS3 匹配 同类 型 中 的 第 nn 个 同 级 兄弟 元 素 下 
加 E:nth-last-of-type(n) | CSS3 匹配 同类 型 中 的 倒数 第 nn 个 同 级 兄弟 元 素 下 
2 E:empty CSS3 匹配 没有 任何 子 元 素 ( 包 括 text 节点 ) 的 元 素 下 
NE es 匹配 用 户 界面 上 处 于 选中 状态 的 元 素 下 。 用 于 input type 为 radio 
( ey 与 checkbox 
od 
5 E:enabled CSS3 匹配 用 户 界面 上 处 于 可 用 状态 的 元 素 
E:disabled CSS3 匹配 用 户 界 面 上 处 于 禁用 状态 的 元 素 下 
E:target CSS3 匹配 相关 URL 指向 的 下 元素 
【 例 9-3] | input:focus { 
用 户 在 某 些 公司 的 注册 网 站 上 进行 注册 : background: #f6f6f6; 
时 可 以 发 现 ， 当 鼠标 放 到 某 一 个 输入 框 时 ， | color: #60; 
该 输入 的 边框 或 者 文字 颜色 会 进行 更 改 , 这 ; border: 1px solid #f60; 
主要 通过 E:focus 选择 器 实现 。 样 式 代码 如 下 : : outline: none; 
: } 
<style> 
h1 { font-size: 16px;} : SE 
ul {list-style: none; margin: 0; padding: 0;} | 上 述 样 式 代码 对 应 的 HIML 网 页 代码 如 下 
<ul> 
<li><input value=" 姓名 " /></li><li><input value=" 单位 "/></li> 
<li><input value=" 年 龄 " /></li><li><input value=" 职业 " /></li> 
</ul> 
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四 伪 对 象 选择 器 
在 CSS3 中 ， 常 用 的 伪 对 象 选择 器 及 其 说 明 如 表 9-4 所 示 。 
表 9-4 CSS 中 的 伪 对 象 选择 器 及 其 说 明 


选择 器 
E:first-letter/E::first-letter 


版 本 
CSS1/CSS3 


说 明 
设置 对 象 内 的 第 一 个 字符 的 样式 
设置 对 象 内 的 第 一 行 的 样式 


设置 在 对 象 前 《依据 对 象 树 的 逻辑 结构 ) 发 生 的 内 容 ， 和 
content 属性 一 起 使 用 


设置 在 对 象 后 (依据 对 象 树 的 逻辑 结构 ) 发生 的 内 容 ， 和 
content 属性 一 起 使 用 


设置 对 象 文字 占 位 符 的 样式 
设置 对 象 被 选择 时 的 颜色 


E-first-line/E::first-line CSS1/CSS3 


E:before/E::before CSS2/CSS3 


E:after/E::after CSS2/CSS3 


E::placeholder CSS3 


E::selection 


在 CSS3 版 本 中 ， 将 伪 对 象 选 择 器 的 单个 冒号 〈:) 修改 为 双 冒 号 (::) ， 其 是 为 了 区 别 于 
伪 类 选择 器 ， 但 是 以 前 的 写法 仍然 有 效 。 根 据 表 9-4 的 内 容 可 知 ，E::placeholder 和 E::selection 
是 CSS3 中 新 增加 的 两 个 选择 器 ， 其 他 4 个 只 是 在 之 前 版 本 的 基础 上 进行 了 更 改 。 
【 例 9-4] 
以 下 代码 针对 Pp 元 素 对 象 内 的 第 一 个 字符 进行 设置 。 


<style> 

hil{font-size:16px;} 

p{width:200px;padding:5px 10px;border:1px solid #ddd;font:14px/1.5 simsun,serif,sans-serif;} 
p::first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;} 

</style> 
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上 述 样式 代码 对 应 的 HIML 网 页 内 容 如 下 : 


<h1> 关于 E::first-letter 选择 器 的 使 用 </h1> 
<p> 今天 ， 阳 光明 媚 ， 了 晴空 万 里 ， 非 常 适 合 户外 活动 ， 如 踏青 、 远 足 之 类 的 。 长 期 坐 在 办 公 室 的 同学 
们 要 多 注意 运动 。</p> 


全 区 关系 选择 器 
简单 理解 , 关系 选择 器 就 是 选择 与 指定 元 素 有 关系 的 其 他 元 素 , 例如 相 邻 元 素 、 子 元 素 等 。 
CSS3 中 有 4 种 关系 选择 器 ， 具 体 说 明 如 表 9-5 所 示 ， 其 中 E~F 选择 器 是 新 增加 的 。 
表 9-5 CSS 中 的 关系 选择 器 及 其 说 明 


选择 器 版 本 说 明 
EF CSS1 包含 选择 器 ， 选 择 所 有 被 下 元 素 包 含 的 上 元素 
E>F CSS2 | 子 选 择 器 ， 选 择 己 元 素 的 所 有 子 元 素 
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( 续 表 ) 
相 邻 选择 器 ， 选 择 紧 贴 在 下 元 素 之 后 的 下 元 素 


097) 9.2 属性 选择 器 


CSS3 新 增加 了 3 个 属性 选择 器 ， 这 3 个 属性 选择 器 经 常会 用 到 ， 下 面 分 别 进行 介绍 。 


串 ) 9.2.1 Ef[att*= “val” ] 
使 用 E[att^="val"] 选择 器 可 以 匹配 具有 att 属性 且 属 性 值 为 以 val 开头 的 字符 串 的 上 元素。 
[ 例 9-5] 
以 下 步骤 演示 了 E[att^="val"] 选择 器 的 使 用 。 
加 中 在 HIML 网 页 中 添加 hl 元 素 和 ul 及 工 元 素 ， 代 码 如 下 : 


<h1 style="text-align: center;"> 把 酒 问 月 </h1> 

<ul> 
<liclass="abc"> 青天 有 月 来 几时 ， 我 今 停 杯 一 问 之 </li> 
<liclass="acb"> 人 攀 明月 不 可 得 ， 月 行 却 与 人 相 随 </li> 
<li class="bac"> 冬 如 飞 镜 临 丹 阙 ， 绿 烟 灭 尽 清 辉 发 </li> 
<li class="bca"> 但 见 宵 从 海上 来 ， 宁 知晓 向 云 间 没 </li> 
<li class="cab"> 和 白 免 的 药 秋 复 春 ， 嫦 妓 孤 栖 与 谁 邻 </li> 
<li class="cba"> 今 人 不 见 古 时 月 ， 今 月 曾经 照 古人 </li> 
<liclass=""> 古人 今 人 若 流 水 ， 共 看 明月 皆 如 此 </li> 
<liclass=""> 唯 愿 当 歌 对 酒 时 ， 月 光 长 照 金 楼 里 </li> 


</ul> 
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四 加 为 HTML 网 页 中 的 元 素 设置 CSS 样 | 。 加 加 网 页 中 古诗 的 前 两 句 样式 以 “a” 开 头 ， 
式 代码 ， 匹 配 具有 class 属性 且 属性 值 是 以 a ;因此 这 两 句 古 诗 的 字体 颜色 发 生 改 变 且 加 粗 显 
开头 的 字符 串 的 于 元 素 ， 指 定 该 元 素 的 字体 ; 示 。 运 行 此 HIML 网 页 ， 效 果 如 图 9-1 所 示 。 
颜色 ， 并 将 字体 加 粗 。 代 码 如 下 : | I 


/csers /paminisvator/Destop/artselecror Mm i 
ul{ width:90%;} 
ul li{ width:40%; margin:0 auto;} 把 酒 疝 月 
青天 有 月 来 JUN ,我 人 人 本 -向 之 

lilclass$="a"] { 2 人 了 

color:#FF0000; 

font-weight:bold; : et 
} | 


图 9-1 El[att$="val"] 选择 器 的 使 用 
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川 ) 9.2.2 Elatt$= “val” ] 


与 E[att="val"] 选择 器 相反 ，E[att$="val"] | 

选择 器 表示 匹配 具有 att 属性 且 属性 值 为 以 val | 

结尾 的 字符 串 的 元 素 。 ， 直接 刷新 〈 按 F5 快捷 键 ) 网 页 或 者 重新 
【 例 9-6】 ; 运行 该 网 页 ， 效 果 如 图 9-2 所 示 。 


在 上 个 例子 的 基础 上 添加 CSS 样 式 代码 ，; fs 
匹配 class 属性 以 “a” 结尾 的 元 素 ， 指 定 ， 
该 元 素 的 字体 大 小 和 颜色 。 代 码 如 下 : 


， 凋 天 有 月 来 J 时， 得 信人 本 向 之 


。 人 可 明月 不 可 得 .月 行 妈 与 人 本 
四 


li[class^="a"]{ 
color:#0000FF; 
font-size:24px; 


图 9-2 E[att^="val"] 选择 器 的 使 用 


上 9.2.3 Elatt*= “val”] 

CSS3 中 新 增加 的 E[att*="val"] 选择 器 用 于 匹配 具有 att 属性 且 属 性 值 为 包含 val 的 字符 
串 的 了 元素 。 简 单 来 说 ， 只 要 指定 的 att 属性 中 包含 val 字符 串 ， 那 么 E 元 素 就 会 与 之 匹配 。 

【 例 9-7]】 

继续 在 前 面 例子 的 基础 上 添加 新 的 样式 代码 ， 匹 配 开 元素 ， 只 要 该 元 素 的 class 属性 中 包 

含 “a” 字 符 ， 就 更 改元 素 的 字体 ， 同 时 添加 下 划 线 。 代 码 如 下 : 


lilclass*="a"] { 
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font-family:" 宋体 "; /* 设置 字 体 */ 
font-size:16px; A* 字体 大 小 */ 
text-decoration:underline; 作 添 加 下 划 线 */ 


yl 


以 上 样式 代码 匹配 元素， 并 重新 设置 
字体 格式 、 字 体 大 小 并 为 字体 添加 下 划 线 。 
如 果 样 式 属性 已 经 存在 , 那么 以 “就 近 原则 ” 把 凋 癌 月 
为 主 。 

刷新 HTML 网 页 或 者 重新 运行 ， 效 果 如 
图 9-3 所 示 。 


图 9-3 El[att*="val"] 选择 器 的 使 用 


咱 )》 9.2.4 ”实践 案例 : 设计 颜色 选择 器 


在 现实 生活 中 ， 经 常会 用 到 属性 选择 器 ， 当 然 属性 选择 器 并 非 “ 自 给 自足 ”， 它 通常 与 
其 他 的 选择 器 (如 伪 类 选择 器 和 关系 选择 器 等 ) 结合 使 用 。 

本 节 实 践 案例 将 属性 选择 器 和 其 他 选择 器 相 结 合 设 计 一 个 简单 的 颜色 选择 器 ， 具 体 实 现 
代码 如 下 : 
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大 中 创建 HTML 网 页 colorSelectorhtml, 在 网 页 的 主体 内 容 中 添加 input 元 素 和 1label 元 素 ， 
分 别 代表 不 同 的 颜色 。 部 分 代码 如 下 : 


<div class="form-group"><label for="examplelnputEmail1"> 请 随意 选择 一 个 颜色 : </label><div> 


<input type="radio" name="cor" id="cor1" value="#4986E7" /> 


<label for="cor1" class="cor1"></label> 


<input type="radio" name="cor" id="cor2" value="#5484ED" /> 


<label for="cor2" class="cor2"></label> 


<!-- 省 略 其 他 内 容 -> 


多 


图 其 大 浮 时 的 效果 。 代 码 如 下 ; 


input[id*="cor"] { 
display: none; 
label[class*="cor"] { 
display: inline-block; 
height: 16px; 
width: 16px; 
cursor: pointer; 
border: 1px solid transparent; 
position: relative; 
margin-right: Spx; 

} 
label[class*="cor"]:hover { 
border-color: #000; 

} 
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加 及 为 上 述 网 页 中 的 元 素 设计 CSS 样式 ， 
首先 设计 input 元 素 的 id 属性 包含 cor 值 的 样 
I 式 ， 接 着 设计 匹配 的 label 元 素 的 内 容 样式 及 | 


可 设计 与 input 元 素 和 1label 元 素 匹 


| 配 时 的 效果 ， 需 要 用 到 E:checked 选择 器 和 


E:before 选择 器 , 同时 涉及 E+F 相 邻 选择 器 。 


| 具体 样式 如 下 : 


input[id*="cor"]:checked + label:before { 


} 


content: '\foOc'; 

display: block; 

position: absolute; 
font-family: 'fontawesome' 
top: Opx; 

left: 1px; 

font-size: 12px; 

color: #fff; 


下 根据 需要 为 元 素 添加 其 他 的 样式 代 


， 码 ， 这 里 不 再 显示 具体 内 容 。 


运行 colorSelectorhtml 网 页 ， 选 择 


”颜色 进行 测试 ， 效 果 如 图 9-4 所 示 。 


DD te 和 所 器 x 恒 


请 随意 选择 一 个 颜色 : 
i 
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© | © file///D/FirstTest/Selector/colorSelector.html 
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图 9-4 颜色 选择 器 实现 效果 


提示 -一 一 一 一 一 一 一 一 一 一 一 一 一 
E:checked 选择 器 是 CSS3 中 新 增加 的 伪 类 选择 器 ， 该 选择 器 用 于 匹配 用 户 界面 上 处 于 选 
| 中 状态 的 元 素 下 。 通 常情 况 下 ， 该 选择 器 用 于 input 的 type 为 radio 与 checkbox 时 的 情况 。 


j 
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4) 9.3 ” 伪 类 选择 器 


用 户 在 进行 实际 操作 时 ， 仅 仅 依靠 属性 选择 器 是 不 够 的 ， 很 多 时 候 需要 借助 其 


他 类 型 的 


选择 器 ， 例 如 伪 类 选择 器 。 伪 类 选择 器 是 定义 好 的 选择 器 ， 不 能 随便 取 名 。 常 用 的 伪 类 选择 


器 有 a:hover、a:link、a:visited 等 。 


在 CSS3 中 新 增 了 多 个 伪 类 选择 器 ， 可 以 实现 更 为 强大 的 功能 ， 下 面 主要 针对 常见 的 选 


择 器 进行 说 明 。 
川 ) 9.3.1 ”E:last-child 选择 器 


E:last-child 选择 器 用 于 匹配 父 元 素 的 最 后 一 
器 。 假 设 用 户 想 为 文章 列表 的 第 


【 例 9-8】 


新 建 lastChildSelector.html 页 面 ， 使 用 EE:first-child 选择 器 设置 第 一 篇 文章 的 标题 背 
色 为 天 蓝 色 ， 设置 最 后 一 篇 文章 的 标题 背景 颜色 为 浅 蓝 色 ， 字 体 为 蓝 色 ， 字 
i i 


<style type="text/css"> 
p{width:30%;margin:0 auto;padding:10px} 
pi:first-child{ 

background-color:skyblue; 
} 
p:last-child{ 

color:blue; 

font-size:18px; 


上 述 代码 对 应 的 HTML 网 页 的 主体 内 容 如 下 : 


<div style="background-image:url(img/bg3.jpg); background-repeat:no-repeat; background-position:center; 


margin:0 auto; width:800px; height:300px"> 
<p> 第 一 篇 为 什么 喜欢 文学 </p> 
<p> 第 二 篇 文学 给 我 带 来 的 变化 </p> 
<p> 第 三 篇 掌声 和 荣誉 </p> 
<p> 第 四 篇 母亲 的 微笑 </p> 
<p> 第 五 篇 时 间 是 光环 还 是 魔 台 </p> 
<p> 第 六 篇 生命 中 出 现 的 那 抹 绿 色 </p> 
<p><a> 第 七 篇 祝福 你 </a></p> 


</div> 


运行 lastChildSelector.html 网 页 ， 效 果 如 图 


一 篇 标题 和 最 后 一 篇 标题 设置 不 同 的 背景 颜 
文章 标题 添加 不 同 的 class 属性 外 , 可 以 通过 Efirst-child 选择 器 和 E:last-child 选 择 器 进行 设置 。 
与 设置 class 属性 相 比 ， 这 种 方法 更 加 简单 方便 。 


个 子 元 素 E， 这 是 CSS3 时 新 加 的 二 个 达 泽 
顷 色 ， 除 了 为 两 篇 


号 为 18px。 
色 。 代 码 如 下 : 


background:lightblue; 
} 
p:last-child a:hover{ 
color:white; 


background-color:orange; 
} 
</style> 
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9-5 所 示 。 
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和 ET] 区 过 
0 sstchidzF3 xx 
© | © file:///D:/FirstTest/Selector/lastChildSelectorhtml 个 | : 
第 一 篇 文字 给 我 带 来 的 变化 
第 三 篇 掌声 和 荣誉 
第 四 篇 母 订 的 窒 笑 
第 五 篇 时 间 是 光环 还 是 麻 
第 六 篇 生 全 中 出 现 的 著 抹 绿色 
末 t 基 入 人 0 
, 2 


- 企 这 -~--------- 人 


| 如 果 要 使 E:last-child 选择 器 的 设置 有 效 ， 那 么 下 元 素 必 须 是 某 个 元 素 的 子 元 素 ，E 的 父 元 素 | 

| 最 高 是 body， 即 卫 可 以 是 body 的 子 元 素 。E:last-child 中 的 下 必须 是 它 兄 弟 元 素 中 的 最 后 一 个 元 素 ， 
即 卫 必须 是 父 元 素 的 最 后 一 个 子 元 素 。 与 之 类 似 的 伪 类 还 有 E:firstchild， 只 不 过 情况 正好 相反 ， 

| 需要 它 是 第 一 个 子 元 素 。 | 


川 ) 9.3.2”E:only-child 选择 器 


E:only-child 选择 器 用 来 匹配 父 元 素 下 仅 有 的 一 个 子 元 素 。 如 果 要 使 E:only-child 选择 器 
中 设置 的 属性 生效 ，E 元 素 必 须 是 某 个 元 素 的 子 元 素 ，E 的 父 元 素 最 高 是 body， 即 卫 可 以 
是 body 的 子 元 素 。 实 际 上 ，E:only-child 选择 器 的 效果 和 E:first-child、E:last-child 或 者 E:nth- 
child(1)、E:nth-last-child(1) 的 效果 一 样 。 
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【 例 9-9] | ul lizonly-child{ 
创建 onlyChildSelectorhtml 网 页 ， 在 页 ; color:#FFOOFF; 
面 的 主体 部 分 添加 3 个 忆 元 素 ， 每 个 ul 元 素 | font-size:20px; 
下 包含 不 同 的 项目 。 当 纪元 素 下 的 项 目 只 | font-weight:bold; 
有 一 个 时 设置 元 素 内 容 的 字体 大 小 、 颜 色 并 : } 


加 粗 显 示 。 有 关 的 样式 代码 如 下 : 


运行 onlyChildSelector.html 网 页 ， 具 体 效果 如 图 9-6 所 示 。 


ET 


© |© tiey//DyFirstTestSelector/onlychiidselector nim! 


图 9-6 FE:only-child 选择 器 的 使 用 
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川 ) 9.3.3”E:nth-child(n) 选择 器 

用 户 使 用 E:nth-child(n) 选择 器 匹配 父 元 素 的 第 n 个 子 元 素 E， 假 设 该 子 元 素 不 是 E， 则 
选择 器 无 效 。 要 使 选择 器 中 设置 的 属性 有 效 ，E 元 素 必 须 是 某 个 元 素 的 子 元 素 ，E 的 父 元 素 
最 高 是 body， 即 EE 可 以 是 body 的 子 元 素 。 

Ei:nth-child(n) 选择 器 允许 使 用 一 个 乘法 因子 (n) 来 作为 换算 方式 ， 例 如 用 户 想 选中 所 有 
的 偶数 子 元 素 E， 可 以 通过 E:nth-child(2n) 实现 。 

【 例 9-10] 

创建 nthChildSecator.html 网 页 ， 利 用 例 9-8 的 网 页 内 容 演示 E:nth-child(n) 选择 器 的 使 

分 别 设置 p 元 素 为 奇数 和 偶数 时 的 字体 颜色 ， 样 式 代 码 如 下 ; 


<style type="text/css"> 


pinth-child(2n+1){ color:darkgreen} /奇数 */ 
pinth-child(2n){ color:red} 庆 偶 数 */ 
</style> 


在 样式 实现 代码 中 , 因为 (n) 代表 一 个 乘法 因子 , 可 以 是 0、1、2、3 等 任意 的 数字 , 因此 (2n) 
换算 出 来 是 偶数 ， 而 (2n+1) 换算 出 来 是 奇数 。 

运行 nthChildSecatorhtml 网 页 ， 效 果 如 图 9-7 所 示 。 从 图 9-7 中 可 以 看 出 ， 所 有 的 奇数 
行 字体 颜色 为 深 绿 色 ， 所 有 的 偶数 行 字体 颜色 为 红色 。 


[BJS 


[DD eetenth-chid 


办 三 


© |© filey//Dy/FirstTest/Selector/nthChildSecatorhtml 站 | : 


第 一 篇 为 什么 喜欢 文学 
第 一 入 文字 给 我 节 末 的 变化 
第 三 篇 千 声 和 荣誉 
第 由 篇 母亲 的 伍 竺 
第 五 篇 时 间 是 光环 还 是 魔 
第 六 篇 生命 中 出 现 的 即 质 绿色 区 
第 t 篇 祝福 尔 0 
图 9-7 FE:nth-child(n) 选择 器 的 使 用 
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【 例 9-11] 
除了 使 用 乘法 因子 外 ， 在 设置 样式 属性 时 还 可 以 使 用 关键 字 ， 如 关键 字 odd 代表 奇数 ， 
关键 字 even 代表 偶数 。 以 下 代码 等 价 于 例 9-10 中 的 样式 代码 。 


<style type="text/css"> 


pi:nth-child(odd){ color:darkgreen} /奇数 */ 
pi:nth-child(even){ color:red} 偶数 */ 
</style> 

【 例 9-12】 


在 前 面 例子 的 基础 上 更 改 样式 实现 代码 ， 首 先 在 HTML 网 页 的 主体 内 容 部 分 的 第 二 个 p 


231 国 


HTMLS+CS553+JavaScript 网 页 设计 入 门 与 应 用 
元 素 后 面 添 加 div 元 素 ， 内 容 如 下 : 
<div class="box"> 近日 ， 现 代 出 版 社 出 版 了 我 的 十 八 卷 文集 。 面 对 着 眼前 这 一 大 堆 书 ， 我 自己 也 感到 


惊讶 这 难道 都 是 我 写 的 ? 我 写 了 这 么 多 文字 ? 打开 书卷 . 迎面 扑 来 的 文字 , 是 我 熟悉 的 , 每 一 行 , 每 一 句 ， 
都 会 匀 起 我 的 回忆 。 这 是 我 人 生 的 展 痕 。 面 对 这 些 书 ， 我 在 想 ， 我 为 什么 会 写 下 这 些 文字 ? </div> 


接着 更 改 CSS 样式 代码 ， 分 别 设置 第 一 | 和 
个 p 元 素 和 第 四 个 p 元 素 的 字体 颜色 ,代码 ; ee 
如 下 : : 
| 在 理想 状态 下 ， 第 一 个 P 元 素 的 字体 颜 
1 = "te 兴 ! a Ze eg 
也 人 | 色 是 红色 ， 第 四 个 p 元 素 (内 容 为 “第 四 篇 
:30%;| : | 同 立 的 向 化? 4 宫 休 新 包 3 日 事实 
pi:nth-child(1){ color:red} : 母亲 的 信守， ) 的 字体 颜色 为 紫色 ， 但 事实 
一 pinth-child(4){color:purple} : 真 的 如 此 吗 ? 刷新 HTML 网 页 ,效果 如 图 9-8 
三 i 所 示 。 
三 口 eat 友 冯 Enthchdr x No ee 
5 C | © IleyVWDVFirstTesVSelectoynthChildsecalorhtml | 
(@) 第 -篇 为 什么 喜欢 文学 
JW) 第 一 入 文学 给 我 从 来 的 变化 
8 es 
5 的 县 损 ， 半 这 些 节 ， 我 丰 坦 ， 苇 为 什 么 全 下 这 上 X 字 
CC 第 三 入 掌声 和 某 淮 
2 第 四 篇 母 革 的 仙 笑 
vo 第 五 入 时 间 是 交 环 还 是 总 邢 
(dp) 第 六 简 生命 中 出 现 的 邵 洒 绿色 加 > 和 
9 第 篇 祝福 你 局 ”家 
一 : ee 
Ke} yg 
rh 


图 9-8 E:nth-child(n) 选择 器 的 使 用 


从 图 9-8 中 可 以 看 出 ， 内 容 为 “第 四 篇 ”母亲 的 微笑 ”的 p 元 素 是 第 四 个 p 元 素 ， 但 是 

段 内 容 并 没有 更 改 字体 颜色 ， 反 而 是 第 三 个 p 元素 的 内 容 字体 颜色 发 生 改 变 ， 这 是 为 什么 
人 这 是 因为 在 E:nth-child(n) 选择 器 中 ， 将 n 指定 为 多 少 ， 那 么 就 会 选择 父 元 素 的 第 n 个 子 
元 素 E， 如 果 第 n 个 元 素 不 是 E， 那 么 将 会 是 无 效 选择 ， 但 是 n 是 会 递增 的 。 

【 例 9-13】 

如 果 用 户 不 想 通过 E:nth-child(n) 选择 器 实现 ， 那 么 可 以 通过 E:nth-of-type(n) 选择 器 实现 。 
E:nth-of-type(n) 选择 器 用 于 匹配 同类 型 中 第 n 个 同 级 兄弟 元 素 。 

例如 ， 同 样 实现 图 9-8 中 的 效果 ， 上 述 例子 使 用 p:nth-child(4) 实现 ， 如 果 要 使 用 E:nth- 
of-type(n) 选择 器 实现 同等 的 效果 ， 可 以 使 用 如 下 代码 : 


pi:nth-of-type(3){color:purple} 


-全 注意 ee 


如 果 不 确定 第 一 个 子 元 素 是 否 为 E， 但 是 又 想 命中 第 一 个 元 素 E， 可 以 使 用 E:first-oftype 选择 
| 器 或 者 Enth- oftype(1) 先 选择 器 。 | 
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9.3.4”E:nth-last-child(n) 选择 器 


E:nth-last-child(n) 选择 器 匹配 父 元 素 的 } 但 并 不 是 以 下 代码 : 
二 站 和 于 
Re 摊 ， 2 的 pi:nth-last-child(6){ background-color:#FFFF99} 
属性 生效 , EE 元 素 必须 是 某 个 元 素 的 子 元 素 ， 
E 的 父 元 素 最 高 是 body， 即 EE 可 以 是 bod 
的 子 元 素 。 
同样 ，E:nth-last-child(n) 选择 器 允许 使 
一 个 乘法 因子 (n) 来 作为 换算 方式 ， 例 妇 
用 户 想 选 中 倒数 第 一 个 子 元 素 E， 那 么 可 
通过 E:nth-last-child(1) 实现 。 
【 例 9-14] 
创建 nthLastChild.html 网 页 ， 利 用 上 个 
例子 的 主体 内 容 设置 样式 代码 。 将 页 面 中 但 
数 第 六 个 元素 〈 即 正 数 第 二 个 p 元 素 ) 的 
背景 颜色 设置 为 本 FFF99， 那 么 E:nth-last 
childn) 选择 器 的 代码 如 下 : 


pi:nth-last-child(7){ background-color:#FFFF99} 


这 是 因为 倒数 第 六 个 p， 其 实 是 倒数 第 
七 个 子 元 素 。 基 于 选择 器 从 右 到 左 解析 ， 首 
先 要 找到 第 一 个 子 元 素 ， 然 后 再 去 检查 该 子 
元 素 是 否 为 p， 如 果 不 是 p， 则 递增 ， 继 续 
查找 。 因 此 需要 通过 p:nth-last-child(7) 进行 
实现 。 

运行 nthLastChild.html 页 面 ， 此 时 实现 
效果 如 图 9-9 所 示 。 

当然 ， 如 果 用 户 不 想 使 用 E:nth-last- 
hild(n) 选择 器 ， 可 以 使 用 E:nth-last-of-type(n) 
选择 器 ， 该 选择 器 用 于 匹配 同类 型 中 倒数 第 
个 同 级 兄弟 元 素 E。 以 下 代码 的 实现 效果 等 
同 于 p:nth-last-child(7) 的 实现 效果 。 


p:nth-last-of-type(6){ background-color:#FFFF99} 


[ 梧 蕊 器 


[ 3] 
D beachloctd x 赚 


¢ > © |@® fle///Dy/FirstTest/Selector/nthLastChild html 合 | : 


第 一 篇 为 什么 喜欢 文学 
第 二 篇 文学 给 我 带 来 的 变化 
近日 ， 现 代 出 版 社 出 版 了 我 的 十 八 卷 文集 。 面 对 着 眼前 这 一 大 堆 书 ， 我 自己 也 感到 售 讶 ; 这 难 和 着 都 是 拒 写 的 ? 


我 写 了 这 么 多 文字 ?打开 书卷 . 迎面 扑 来 的 文字 ， 是 我 各 亚 的 ， 每 一 行 ， 每 一 句 ， 都 会 勾 起 我 的 回忆 。 这 是 我 人 生 
， 面 对 这 些 书 . 我 在 想 ， 我 为 什么 会 写 下 这 些 文字 ? 
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第 = 篇 掌声 和 莹 窜 

第 四 篇 母 邓 的 微笑 

第 五 篇 时 间 是 光环 还 是 魔 3 
第 六 篇 生 余 中 出 现 的 那 抹 绿 色 
第 七 篇 祝福 你 


-人 注意 ~- 一 一 一 一 一 一 一 一 一 一 一 一 过 去 


如 果 不 确定 倒数 第 一 个 子 元 素 是 否 为 E， 但 是 又 想 命中 倒数 第 一 个 元 素 玉 ， 可 以 使 用 E:last-of- | 
| ype 选择 器 或 者 E:nth-last-of-type(1) 选择 器 。 1 


叫 ) 9.3.5”E:root 选择 器 


E:root 选择 器 匹配 王 元 素 在 文档 中 的 根 元素 。 在 HTML 中 ， 根 元 素 永远 是 html。 例 如 以 
下 代码 : 
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html:root{ 
<style type="text/css"> 
color:red; etl 
} background-color: black; 
i background-color: yellow\0; 
其 效 果 等 价 于 *background-color: blue; 
:root{ _background-color: red; 
color:red; | } 
] | html:root .test { 
| background-color: purple\0; 
[ 例 9-15] 
根据 Eroot 选择 器 的 特性 ， 可 以 做 IE8 ， } 
的 Hack， 即 在 不 同 版 本 的 浏览 器 下 呈现 不 ; /ele 
同 的 效果 。 例 如 ， 在 HTML 网 页 中 添加 一 个 ; S/head> 
300 x 300 像素 的 div 元 素 ， 非 正 浏览 器 中 其 ; 
背景 颜色 为 black (黑色 ),，IE9 及 其 以 上 版 <body> 
本 显示 为 purple (紫色 ，IE8 为 yellow (黄色 )， | <div style="width:300px;height:300px;" class= 
IE7 为 bue ( 蓝 色 ) ，IE6 为 red (红色 ) 。 完 整 ”est></div> 
代码 如 下 : | /body> 


咱 ) 9.3.6 ”Ei:not(s) 选择 器 

E:not(s) 选择 器 匹配 不 含有 s 选择 器 的 元 素 E， 又 被 称 为 否定 伪 类 选择 器 。 假 设 当 前 存在 
一 个 列表 ， 每 个 列表 项 都 有 一 条 底 边 线 ， 但 是 最 后 一 项 不 需要 底 边线 ， 这 时 可 以 使 用 E:not(s) 
选择 器 。 示 例 代码 如 下 : 
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.demo li:not(:last-child) { 
border-bottom: 1px solid #ddd; 
} 


【 例 9-16]】 
创建 rootSelectorhtml 网 页 ， 在 该 页 面 的 主体 部 分 添加 以 下 内 容 。 


<ul class="demo"> 

<li> 第 一 篇 为 什么 喜欢 文学 </li> 

<li class="fontsize"> 第 二 篇 文学 给 我 带 来 的 变化 </li> 

<div class="box"> 近日 ， 现 代 出 版 社 出 版 了 我 的 十 八 卷 文集 。 面 对 着 眼前 这 一 大 堆 书 ， 我 自己 也 感 
到 惊讶 :这 难道 都 是 我 写 的 ? 我 写 了 这 么 多 文字 ? 打开 书卷 ， 迎 面 扑 来 的 文字 ， 是 我 熟悉 的 ， 每 一 行 ， 
每 一 句 ， 都 会 勾 起 我 的 回忆 。 这 是 我 人 生 的 展 痕 。 面 对 这 些 书 ， 我 在 想 ， 我 为 什么 会 写 下 这 些 文字 ? </ 
div><li> 第 三 篇 掌声 和 荣誉 </Ii> 

<li class="fontsize"> 第 四 篇 母亲 的 微笑 </li> 

<li> 第 五 篇 时间 是 光环 还 是 魔 完 </li> 

<li> 第 六 篇 生命 中 出 现 的 那 抹 绿色 </li> 


</ul> 
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为 上 述 内 容 中 的 元 素 设置 样式 ， 主 要 设置 除了 类 选择 器 fontsize 之 外 的 元素 的 字体 颜 


色 和 字体 大 小 。 有 关 代码 如 下 : 


<style type="text/css"> 

.box{ text-indent:2em;} 

ul.demo li.fontsize{ 
color:blue; 
font-weight:bold; 

} 

ul.demo li:not(.fontsize){ 
font-size:24px; 
color:red; 

1 

</style> 


/* fontsize 类 选择 器 设置 指定 1 元 系 的 样式 */ 


/* 除了 fontsize 类 选择 器 之 外 的 1i 元 票 的 样式 */ 


运行 rootSelectorhtml 页 面 ， 效 果 如 图 9-10 所 示 。 


IJIEI 可 | J] 
DD Enor() 运 所 轿 x 昌国 
< C © file///D/FirstTest/Selector/rootSelector.html 女 


。 第 一 篇 为 什么 喜欢 文学 
。 第 一 篇 文学 给 于 带 来 的 变化 


的 
近日 ， 现代 出 版 和 出 版 了 我 的 十 八 芝 文 入。 面 对 著 限 前 这 一 大 堆 书 ， 我 自己 也 感到 惊讶 : 这 难道 都 是 我 


各 了 这 和 多 文字 ?条 并， 
忆 。 这 是 我 人 生 的 磺 所 ,我 

。 第 三 篇 全 志和 亲 洛 
，。 弟 四 简体 亲 的 浏 笑 

。 第 五 篇 时 间 是 光环 还 是 魔 咒 

。 第 六 篇 生命 中 出 现 的 那 抹 绿色 


我 在 想 ， 我 为 什么 会 写 下 这 些 文字 ? 


每 一 行 ， 每 一 句 , 都 会 勾 起 我 的 回 
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9-10”E:not(s) 选择 器 


川 ) 9.3.7 E:empty 选择 器 


Eempty 选择 器 用 于 匹配 没有 任何 子 元 | 


素 (包括 text 节点 ) 的 元 素 E。 
【 例 9-17】 
如 下 代码 演示 了 E:empty 选 择 器 的 使 用 。 


<style> 
pf test-indent:2em;} 
p:empty { 
height: 25px; 
border: 1px solid #ddd; 
background: #eee; 


</style> 
<body> 
<div class="test"> 
<p> 结构 性 伪 类 选择 器 Eempty (PS: 
E:empty 选择 器 用 于 匹配 没有 任何 子 元 票 ， 包 括 
text 节点 的 元 票 E) </p> 
<p><!-- 我 是 一 个 空 节点 p， 请 注意 我 与 其 
他 非 空 节点 p 的 外 观 有 什么 不 一 样 -></p> 
<p> 以 上 就 是 针对 结构 性 伪 类 选择 符 
E:empty 的 说 明 </p> 
</div> 
</body> 
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川 ) 9.3.8”E:target 选择 器 
E:target 选择 器 匹配 相关 URL 指向 的 元素。 在 HTML 网 页 中 ，URL 后 面 跟 锚 点 # 指 
向 文档 内 某 个 县 体 的 元 素 ， 这 个 被 链接 的 元 素 就 是 目标 元 素 (areet elemen。Etareet 选择 吕 
用 于 选取 当前 活动 的 白 标 艺 素 - 


【 例 9-18] 


以 下 示例 演示 了 E:target 选择 器 的 使 用 。 
加 克 新 建 target.html 网 页 ， 在 页 面 中 添加 div 元 素 、p 元 素 等 内 容 ， 部 分 代码 如 下 : 


<div class="test"> 
<div class="hd nav "> 
<a href="#panel1"> 一 个 美丽 的 故事 </a> 
<a href="#panel2"> 婴儿 游泳 有 什么 好 处 </a> 
<a href="#panel3"> 婴儿 游泳 注意 事项 </a> 
<a href="#panel4"> 健康 生活 常识 </a> 
<a href="#panel5"> 张爱玲 名 言 名 句 </a> 
</div> 
<div class="bd"> 
<div id="panel1" class="panel"> 
<h2> 一 个 美丽 的 故事 </h2> 
<div><p> 有 个 塌 鼻 子 的 小 男孩 儿 , 因为 两 岁 时 得 过 脑 炎 , 智力 受 损 , 学 习 起 来 很 吃力 。 
打 个 比方 ,别人 写作 文 能 写 二 三 百 字 ， 他 却 只 能 写 三 五 行 。 但 即便 这 样 的 作文 ， 他 同样 能 写 得 美丽 如 花 。</p> 
<p> 那 是 一 次 作文 课 ， 题 目 是 《愿望 》。 他 极其 认真 地 想 了 半天 ， 然 后 极其 认真 地 写 ， 那 作文 极 短 ， 只 
有 三 句 话 : 我 有 两 个 愿望 ， 第 一 个 是 ， 妈 妈 天 天 笑 转 旺 地 看 着 我 说 ， “你 真 聪明 。” 第 二 个 是 ， 老 师 天 天 笑 
睐 睐 地 看 着 我 说 ，“ 你 一 点 也 不 笨 。”</p> 
<p> 于 是 ， 就 是 这 篇 作文 ， 深 深 地 打动 了 他 的 老师 ， 那 位 妈妈 式 的 老师 不 仅 给 了 他 最 高 分 ， 在 班 上 带 感 
情 朗 诵 了 这 篇 作文 ， 还 一 笔 一 画 地 批 道 : 你 很 聪明 ， 你 的 作文 写 得 非常 感人 。 请 放心 ， 妈 妈 肯 定 会 格外 喜欢 
你 的 ， 老 师表 定 会 格外 喜欢 你 的 。 大 家 肯定 会 格外 喜欢 你 的 。</p> 
</div> 
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</div> 
<!- 省 略 其 他 部 分 代码 -> 
</div> 


</div> 


大多 为 上 述 元 素 添 加 如 下 代码: 


<style type= "text/css"> 

‘test .hd{fpadding:10px 0;} 

.test .nav{position:fixed;right:10px;left: 540px;} 

‘test .nav a{display:block;margin: 10px 0;} 

.test .bd .panel{width:500px;margin-top:5px;border:1px solid #ddd;} 
.test .bd h2{border-bottom:1px solid #ddd;} 

‘test .bd .panel:target{border-color:#f60;} 

.test .bd .panel:target h2{border-color:#f60;} 


图 236 


第 9 章 CSS3 选择 器 
oY 


h2,p{margin:0;padding:10px;font-size:16px;} 
</style> 


加 运行 targethtml 网 页 ， 初 始 效果 如 图 9-11 所 示 。 单 击 右 侧 要 查看 的 内 容 链接 ， 效 果 
如 图 9-12 所 示 。 


GC | © filey///D:/FirstTest/Selector/target.html 


一 个 美丽 的 故事 
有 个 塌 鼻 子 的 小 男孩 儿 ， 因 为 两 岁 时 得 过 脑 炎 ,智力 受 损 ,学 习 起 来 


很 吃力 。 打 个 比方 ， 别 人 写作 文 能 写 二 三 百 字 ,他 却 只 能 写 三 五 行 。 
但 即便 这 样 的 作文 ， 他 同样 能 写 得 美丽 如 花 。 


那 是 一 次 作文 课 ,题目 是 《愿望 》。 他 极其 认真 地 想 了 半天 ， 然 后 极 
其 认真 地 写 ， 那 作文 极 短 ， 只 有 三 句 话 : 我 有 两 个 愿望 ， 第 一 个 是 ， 
妈妈 天 天 笑 号 睐 地 看 着 我 说 : “你 真 聪明 。” 第 二 个 是 ， 老师 天 天 笑 
睐 昧 地 看 着 我 说 : “你 一 点 也 不 笨 。” 


图 9-11 初始 效果 


© | © file///DYFirstTesVSelectortargethtmlspanel5 


得 出 来 。 人 生 三 件 事 不 能 等 : 孝 老 、 行 善 、 健 身 。 三 件 事 不 能 怕 : 
年 龄 、 孤 独 、 未 来 。 三 件 事 不 能 悔 : 工作 、 机 遇 、 出 身 。 


张爱玲 名 言 名 句 


也 许 每 一 个 男子 全 都 有 过 这 样 的 两 个 女人 ， 至 少 两 个 。 

至 了 红 玫 瑰 , 久而久之， 红 的 变 了 墙 上 的 一 抹 蚊 子 血 ， 白 的 还 是 “ 床 
前 明月 光 ” ; 

娶 了 白 玫 瑰 ， 白 的 便 是 衣服 上 的 一 粒 饭 粘 子 ， 红 的 却 是 心口 上 的 一 颗 
朱砂 半 。 
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图 9-12 链接 跳 转 效 果 


咱 》9.3.9 ”实践 案例 : 单 击 链接 显示 具体 内 容 


用 户 在 实际 操作 过 程 中 ， 经 常会 实现 一 个 功能 ， 例 如 单 击 某 个 按钮 或 者 链接 ， 实 现 页 面 
跳 转 或 者 显示 某 段 内 容 ， 再 次 单 击 该 按钮 ， 显 示 的 内 容 将 会 隐藏 。 大 多 数 情况 下 ， 用 户 可 以 
通过 JavaScript 脚本 语言 实现 ， 实 际 上 ， 用 户 还 可 以 直接 利用 样式 代码 实现 。 

本 节 实 践 案例 是 单 击 网 页 中 的 链接 显示 某 一 段 具体 的 文字 ， 实 现 步骤 如 下 。 

加 驻 创建 clickShowMessage html 网 页 ， 在 网 页 中 添加 input 元 素 、label 元 素 以 及 控制 显 
示 的 div 元 素 ， 该 元 素 包含 一 个 p 元 素 。 


<input type="checkbox" class="toggle" id="toggle" /> 
<label for="toggle"> 点 我 </label> 
<div class="toggled"> 
<p> 张爱玲 幼 时 生 于 上 海 ， 青 年 求学 香港 ， 晚 年 泰 动 台 湾 ， 最 终 隐 逝 美国 。 穿 过 中 国 最 黑暗 的 年 
代 ， 她 轻 灵 翩 踊 ， 自 如 来 去 女性 书写 领域 ， 在 小 说 、 散 文 、 电 影 剧 本 等 方面 都 有 丰富 作品 。 因 其 善 塑 细腻 
与 古典 兼 具 的 女性 形象 、 精 准 把 握 人 物 心理 特征 而 为 时 人 所 称道 ， 其 作品 与 思想 都 值得 借鉴 。</p> 


</div> 
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四 加 为 上 个 步骤 中 的 元 素 添加 样式 代码 ，; padding: 0; 
这 里 需要 用 到 E:not(s) 选择 器 、E:checked 选 : position: absolute; 
择 器 、E~F 选择 器 等 。 主 要 样式 代码 如 下 : : width: 1px; 
| } 
sls toggle:focus ~ label { 
‘toggle,.toggle:not(:checked) ~ .toggled /*2*/{ color: deeppink; 
border: 0; : } 
clip: rect(0 0 0 0); : Eves 
height: 1px; | 
margin: -1px; | 风电 运行 clickShowMessage.html 页 面 查 
verfiows hiddens; ; 看 效果 ， 单 击 标签 时 的 效果 如 图 9-13 所 示 。 
口 交 Css 点击 呈 示 PR 窜 。 x ee 
所 CGO fileVW/DYFirstTest/selectoryclickShowMessage.html 广 


点 我 
张爱玲 幼 时 生 于 上 海 ， 青 年 求学 香 潜 ， 隐 年 到 动 台湾 ,最 疼 隐 逝 美 国 ， 穿 过 中 国 最 黑 
瞳 的 年 代 ,她 轻 灵 饥 墅 ,自如 来 去 女性 书写 领域 ， 在 小 说 、 散 文 、 电 影 剧 本 等 方面 都 
有 丰富 作品 。 因 其 善 塑 细 瞬 与 古典 兼 具 的 女性 形象 、 精 准 把 握 人 物 心 理 特征 而 为 时 人 
所 称 谱 .其 作 品 与 思想 都 全 得 借鉴 - 


图 9-13 单 击 标签 显示 内 容 


介 )) 9.4” 伪 对 象 选择 器 


伪 元 素 选择 器 并 不 是 针对 真正 的 元 素 使 用 的 选择 器 ， 而 是 针对 定义 好 的 伪 元 素 使 用 的 选 
择 器 。CSS3 针对 存在 的 伪 对 象 选 择 器 进行 了 更 改 ， 同 时 新 增加 了 两 种 伪 对 象 选 择 器 。 


叫 )》 9.4.1 E::selection 选择 器 
E::selection 多国 用 向 且 双轨 仿生 轩 的 梓 二 。 


1dUoSeAer+SsSSI+S1WNLH 人 


【 例 9-19] : background-color:yellow; /* 黄色 背景 */ 
在 例 9-17 的 基础 上 添加 样式 代码 ， 为 p color:blue; /* 绿色 字体 */ 
元 素 添加 样式 ， 设 置 p 元 素 中 的 内 容 被 选中 | font-size:24px; 
时 的 背景 颜色 、 字 体 颜色 和 字体 大 小 。 样 式 : } 
代码 如 下 : | 
3 ! 运行 HTML 网 页 ， 选 择 内 容 进 行 测试 ， 
p::selection{ | 效果 如 图 9-14 所 示 。 
五 | | 忆 [ 梧 | 云 
由 Escelection 还 泽 固 x 人 
CG © filey/DYFirstTest/Selector/selection.html 人 女 | 3: 


结构 性 伪 类 选择 符 Fempty ( PS : Femnpty 选 择 回 用 于 匹配 没有 任何 子 元 素 ( 包括 text 节 点 ) 的 元 素 E ) 


以 上 就 是 针对 结构 性 伪 差 选择 符 Eempty 的 说 明 


图 9-14 E::selection 选择 器 的 使 用 
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叫 ) 9.4.2 E::placeholder 选择 器 

E::placeholder 选择 器 用 于 设置 对 象 文字 占 位 符 的 样式 。E::placeholder 选择 器 用 于 控制 表 
单 输入 框 占 位 符 的 外 观 ， 它 允许 开发 者 /设计 师 改 变 文字 占 位 符 的 样式 ， 默 认 的 文字 占 位 符 
为 浅 灰色 。 

当 表 单 背景 色 与 占 位 符 的 颜色 类 似 时 ， 可 能 效果 并 不 是 很 明显 ， 那 么 可 以 使 用 
E::placeholder 来 改变 文字 占 位 符 的 颜色 。 


提示 一 一 一 一 一 一 一 一 一 a 


除了 Firefox 浏览 器 使 用 E::[prefix]placeholder 外 ， 其 他 浏览 器 都 是 使 用 E::[prefix]input- | 
| Placeholder。 另 外 ，Firefox 浏览 器 支持 该 伪 元 素 使 用 text-overflow 属性 来 处 理 溢 出 问题 。 1 


【 例 9-20] 
以 下 代码 演示 了 E::placeholder 选择 器 的 使 用 。 


<style> 
input::-webkit-input-placeholder { color: red; } 
input:-ms-input-placeholder { color: red; } // E10+ 
input:-moz-placeholder { color: red; } // Firefox4-18 
input::-moz-placeholder { color: green; } // Firefox19+ 
</style> 
<body> 

<input id="test" placeholder=" 请 输入 搜索 关键 词 "> 

<input type="button" value=" 立即 搜索 " class="btn" /> 
</body> 


在 上 述 代码 中 ， 分 别 设置 不 同 浏览 器 使 用 E::placeholder 选择 器 时 应 使 用 的 格式 。 运 行 
HIML 网 页 ， 效 果 如 图 9-15 所 示 。 


[se] 


ny 
PDEenunss x 
€ > © [© fie//DyFirstTesyselector/placeholderhtml 女 j 


图 9-15 E::placeholder 选择 器 的 使 用 


川 ) 9.4.3 已 修改 的 选择 器 
在 前 面 已 经 提 到 过 ，CSS 3 中 除了 新 增加 了 选择 器 外 ， 还 针对 某 些 选择 器 进行 了 更 
改 。 对 伪 对 象 类 型 的 选择 器 来 说 ， 已 修改 的 选择 器 有 E:firstline (修改 为 E::first-line》、 
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E::first-letter ( 修改 为 E::first-letter)、E:before (修改 为 E::before) 和 E:after (修改 为 


E::after) 。 
WW :firstline 和 E::first-letter 选择 器 
针对 E::first-line 和 E::first-letter 选择 器 ， 用 户 都 需要 注意 两 点 。 以 E::first-line 选择 器 
为 例 。 


@ E::firstline 选择 器 不 能 紧 挨 着 规则 集 大 括 号 ， 需 留 有 空格 或 换行 。 
@ 为 了 与 伪 类 选择 器 进行 区 分 ， 才 将 单 冒号 更 改 为 双 冒 号 。 但 是 本 质 上 并 不 支持 伪 元 素 的 
双 冒 号 ( :: ) 写法 ， 而 是 忽略 其 中 的 一 个 冒号 ， 仍 以 单 冒号 来 解析 ， 所 以 等 同 于 变相 支持 
了 E::first-line。 
医 E:after 选择 器 和 E::before 选择 器 
与 上 述 两 种 选择 器 一 样 ， 这 两 种 选择 器 本 质 上 并 不 支持 伪 元 素 的 双 冒 号 写法 ， 而 是 忽略 
其 中 的 一 个 冒号 ， 仍 以 单 冒 号 来 解析 ， 所 以 等 同 于 变相 支持 了 E::before 和 E::after。 另 外 ， 这 
两 种 选择 器 还 需要 注意 以 下 几 点 。 
e 用 来 和 content 属性 一 起 使 用 ， 并 且 必 须 定义 content 属性 。 
e@ 不 支持 设置 属性 position、float、list-style-* 和 一 些 display 值 ; Firefox 3.5 开始 取消 了 这 些 
限制 。 
e@ IE 10 浏览 器 中 使 用 伪 元 素 动画 时 需要 用 一 个 空 的 E:hover 进行 激活 。 代 码 如 下 : 


,test:hover {} 
.test:hover::before { /* 这 时 animation 和 transition 才 生 效 */} 


【 例 9-21] 
下 面 代码 演示 了 E::before 选择 器 和 E::after 选择 器 的 使 用 。 
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<style> 

p{position:relative;color:#f00;font-size:14px;font-size:O\9;*font-size:14px;} 

p:before{position:absolute;background:#fff;color:#000;content:” 如 果 你 能 看 到 这 段 文字 ， 说 明 你 的 浏览 
器 只 支持 E:before";font-size:14px;} 

p::before{position:absolute;background:#fff;color:#000;content:" 如 果 你 能 看 到 这 段 文 字 ， 说 明 你 的 浏览 
器 支持 E:before 和 E::before";font-size:14px;} 

</style> 

<body> 

<p>Sorry, 你 的 浏览 器 不 支持 E:before 和 E::before</p> 
</body> 


川 )》 9.4.4 ”实践 案例 : 选择 器 和 content 属性 结合 插入 内 容 

在 介绍 E::after 选择 器 和 E::before 选择 器 的 时 候 ， 不 止 一 次 提 到 过 content 属性 。content 
属性 与 E::after 和 E::before 选择 器 结合 使 用 时 ， 分 别 表 示 在 对 象 后 或 对 象 前 插入 指定 的 内 容 。 
content 属性 的 具体 取 值 及 其 说 明 如 表 9-6 所 示 。 
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表 9-6 content 属性 的 取 值 及 其 说 明 


取 值 说 明 
normal 默认 值 。 表 现 与 none 值 相同 
none 不 生成 任何 值 
<attr> 插入 标签 的 属性 值 
i 使 用 指定 的 绝对 或 相对 地 址 插入 一 个 外 部 资源 (图 像 、 声 频 、 视 频 
或 浏览 器 支持 的 其 他 任何 资源 ) 
<string> 插入 字符 囊 
counter(name) 使 用 已 命名 的 计数 器 
counter(name,list-style-type) 使 用 已 命名 的 计数 器 并 遵从 指定 的 list-style-type 属性 
counters(name,string) 使 用 所 有 已 命名 的 计数 器 


Do-close-quote 
Do-open-quote 


close-quote 


open-quote 


counters(name,string,list-style-type) 


使 用 所 有 已 命名 的 计数 器 并 遵从 指定 的 list-style-type 属性 
不 插入 quotes 属性 的 后 标记 ， 但 增加 其 谋 套 级 别 

不 插入 quotes 属性 的 前 标记 ， 但 减少 其 谋 套 级 别 

插入 quotes 属性 的 后 标记 


插入 quotes 属性 的 前 标记 


content 虽然 只 是 一 个 属性 ， 但 是 其 功 | 


0 使 用 该 属性 不 仅 可 以 插入 文 ; 
、 图 像 ， 还 可 以 插入 项 目 编号 ， 并 且 指定 


等 。 


本 节 实 践 案例 


主要 利 


例如 插入 文字 、 图 像 , 使 用 指 
具体 步骤 如 下 。 


定 的 计数 器 等 ， 


加 入 创建 contenthtml 网 页 ， 在 该 页 面 添 : 


加 无 序列 表 元 素 。 首 先 添加 第 一 个 列表 项 ， 
内 容 如 下 : 


<ul class="test"> 
<liclass="string"> 
<strong>string: </strong> 
<p> 你 的 浏览 器 是 否 支 持 content 属 
性 : 否 </p> 
</li> 
< 上 -其 他 项 目 列表 -> 


</ul> 


项 目 编号 的 各 类、 样式， | 


时 E::after 和 | 
E::before 选择 器 演示 content 属 性 的 实现 效果 ， | 


| 下 ， 这 里 主要 用 到 content 属性 的 attr 取 值 。 


硬 如 以 下 代码 表示 在 p 元 素 对 象 后 添加 
内 容 ，content 属性 值 为 “支持 ”。 


.string p:after { 
margin-left: -16px; 
background: #fff; 
content: " 支持 "; 
color: #f00; 
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} 


@ 吕 继续 添加 列表 项 ， 内 容 如 下 : 


<liclass="attr"> 
<strong>attr: </strong> 
<p title=" 如 果 你 看 到 我 ， 则 说 明 你 目前 
使 用 的 浏览 器 支持 content 属性 "></p> 


</li> 


看 恰 上 述 列表 项 中 了 元素 的 对 应 样式 如 


.attr p:after { content: attr(title); } 
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四 加 继续 添加 列表 项 ， 该 列表 项 用 于 在 指定 的 p 元 素 前 插入 图 像 。 内 容 如 下 ;: 


<li class="url"> 
<strong>url(): </strong> 
<p> 如 果 你 看 到 我 的 头像 图 片 ， 则 说 明 你 目前 使 用 的 浏览 器 支持 content 属性 </p> 


</li> 


86) 在 p:before 选择 器 中 通过 content 属性 指定 图 像 。 
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:url p:before { 


content: url(https://pic.cnblogs.com/avatar/779447/20160817152433.png); 


display: block; 
} 


大 D 继续 添加 列表 项 ， 该 列表 项 演示 
counter(name) 的 使 用 。 


<liclass="counter1"> 
<strong>counter(name): </strong> 
<ol><li> 列表 项 </li><li> 列表 项 </li><li> 
列表 项 </li></ol> 
</li> 


码 如 下 : 


.Counter1 li{ counter-increment: testname; } 
.Counterl li:before { 

content: counter(testname)":"; 

color: #f00; 

font-family: georgia, serif,sans-serif; 


} 


09) 继续 添加 列表 项 ， 该 列表 项 演示 | 


<liclass="counter3"> 


<strong>counter(name) 拓展 应 用 : </strong> 


<ol> 
<li> 列表 项 


WB) 上 个 步 又 的 元 素 对 应 的 CSS 样式 代 ， 


i counter(name,list-style-type) 的 使 用 。 


<liclass="counter2"> 
<strong>counter(name,list-style-type): </ 
strong> 
<ol><li> 列表 项 </li><li> 列表 项 </li><li> 
列表 项 </li></ol> 
</li> 


避风 上 个 步骤 对 应 的 CSS 样式 代码 如 下 : 


.counter2 li{ counter-increment: testname2; } 
.Counter2 li:before { 
content: counter(testname2,lower-roman)":"; 
color: #f00; 
font-family: georgia, serif,sans-serif; 


b 


国 风 继续 添加 列表 项 ， 该 列表 项 演示 
counters(name) 扩展 内 容 的 使 用 。 


<ol><li> 列表 项 <ol><li> 列表 项 </li><li> 列表 项 </li></ol></li><li> 列表 项 </li></ol> 


</li> 


<li> 列表 项 <ol><li> 列表 项 </li><li> 列表 项 </li></ol></li> 
<li> 列表 项 <ol><li> 列表 项 </li><li> 列表 项 </li></ol></li> 


</ol> 


</li> 
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下 加 为 上 个 步骤 中 的 元 素 指定 样式 , 涉及 content 属性 取 值 counter(name) 的 多 个 扩展 应 用 。 


具体 设置 样式 代码 如 下 : 


.counter3 ol ol { margin:000 28px; } 


.Counter3 li{ padding: 2px 0; counter-increment: testname3; } 


.counter3 li:before { 


} 


content: counter(testname3,float)":"; 
color: #f00; 
font-family: georgia,serif,sans-serif; 


.Counter3 lili{ counter-increment: testname4; } 


.counter3 lili:before { content: counter(testname3,decimal)"."counter(testname4,decimal)":"; } 


.Counter3 lilili{ counter-increment: testname5; } 


.Counter3 lilili:before { 


ji 
4 | EY Sl 
EE 到 这 里 多 所 有 的 区 口 conrent 昌 作 的 使 用 x 人 
奖 Le 、\ 元 | 
内 合 e 经 yj 绍 元 毕 。 过 € C 合 | 0 fiey//H:/XTD/ 书 入 /HTML5+CSS3+JavaScript 网 页 设计 入 门 与 应 用 / 兰 代 码 /code9/con... 女 四 DO 
行 content.html 页 面 ， 运 attr: 用 
行 膏 向 六 司 
行 效果 的 部 分 截 图 如 9-16 如 果 你 看 到 我 ， 则 说 明 你 目前 使 用 的 浏览 器 支持 content 辕 性 
所 示 。 。 url0 : 


( 寺 


content: counter(testname3,decimal)"."counter(testname4,decimal)"."counter(testnameS,decimal)":"; 


A Ba 
如 果 你 看 到 我 的 头像 图 片 ， 则 说 明 你 目前 使 用 的 浏览 器 支持 content 属 性 
» counter(name) : ~ 


图 9-16 网 页 部 分 效果 


9.5 ”兄弟 选择 器 


兄弟 选择 器 E~F 用 于 选择 EE 元 素 后 面 的 所 有 兄弟 元 素 F。 它 是 CSS3 新 增加 的 一 种 选择 器 ， 
这 种 选择 器 将 选择 某 元 素 后 面 的 所 有 兄弟 元 素 ， 它 们 也 和 相 邻 兄弟 元 素 类 似 ， 需 要 在 同一 个 


父 元 素 品 


h 。 换 句 话说 ，E 和 下 元 素 属于 同一 个 父 元 素 ， 并 且 F 元素 在 E 元 素 之 后 ， 那 么 E~F 


选择 器 将 选择 所 有 上 E 元 素 后 面 的 F 元 素 。 


I 


| 面 的 元 素 (选中 仅 有 一 个 元 素 ); 而 兄弟 元 素 选择 器 选中 的 是 元 素 相 邻 的 后 面 的 全 部 兄弟 元 素 。 | 


sd 
I 
弟 选 择 器 和 相 邻 选择 器 极其 相似 ， 只 不 过 ， 相 邻 选择 器 选择 的 元 素 是 仅 与 其 相 邻 的 后 
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【 例 9-22】 


下 面 示例 演示 了 E~F 选择 器 的 使 用 。 
困 友 创建 selectorhtml 网 页 ， 在 网 页 中 添加 以 下 内 容 。 


<h3> 假 的 流言 一 </h3> 
<p> 第 1 篇 12 岁 儿 童 坐 飞机 需 办 身份 证 ? </p> 


<p> 第 2 篇 


“ 神 药 ” 真 的 决定 生男 生 女 吗 </p> 


<h3> 假 的 流言 二 </h3> 
<p> 第 3 篇 ”有 机 食物 比 普通 食物 更 营养 ? </p> 


<h3> 假 的 流言 三 </h3> 


<p> 第 4 篇 ”肝脏 真 的 有 排毒 时 间 表 吗 ? </p> 
<p> 第 5 篇 西瓜 和 桃子 同 吃 会 致命 </p> 


大 多 使 用 p~p 匹配 p 元 素 的 兄弟 元 素 p， 并 设置 字体 颜色 为 红色 。 样 式 代码 如 下 : 
ppt{ 
color: #f00; 
} 
转运 行 selectorhtml 页 攻 S 要 | 
面 ， 效 果 如 图 9-17 所 示 。 € > © [@ me/DyFirstTesSelector/selector hi | : 
假 的 流言 一 
入 1 入 12 光 儿童 飞机 雪 力 身份 下 7 
第 2 篇 “ 神 药 ” 真 的 决定 生男 生 女 吗 
假 的 流言 二 
算 3 篇 有 机 食物 比 苦 通 食物 更 营 章 7 
假 的 流言 三 和 
总 4 稚 时 肚 丰 的 有 排 千 时 间 雪 吗 7 你 
第 5 入 西 凡 和 桃子 同 吃 会 到 全 a 2 人 
| 
图 9-17 兄弟 选择 器 的 效果 
1 7 旦 
) 7 9.6 ”练习 题 
一 、 填 空 题 
1. 选择 器 匹配 具有 att 属性 且 属 性 值 为 以 val 开头 的 字符 串 的 EE 元 素 。 
2 选择 器 用 于 匹配 父 元 素 的 最 后 一 个 子 元 素 E。 
3 表示 否定 伪 类 选择 器 。 
4. 在 CSS3 中 新 增加 的 伪 对 象 选择 器 有 和 E::placeholder 两 种 。 
5. 使 用 E::before 选择 器 插入 图 像 文 件 时 ， 需 要 用 content 属性 的 属性 值 指定 
插入 的 图 像 路 径 。 
6， 用户 要 使 用 E::after 或 E:before 选择 器 ， 那 么 必须 设置 属性 。 


第 9 章 CSS3 选择 器 


1. 在 下 面 选项 中 ，CSS3 新 增 的 属性 选择 器 不 包含 
A. Elatt*="val"] 

B. El[att="val"] 
C 
D 
2 


。 了 E[att$="val"] 


一 


。E[att^="val"] 

.假设 当前 存在 一 个 多 行 多 列 的 表格 ， 如 果 要 实现 隔行 变色 的 效果 ， 将 E:nth-of-type(n) 
中 的 mn 设置 为 ， 表 示 设 置 偶数 行 的 样式 。 

A. odd 

B. even 

C. 2n+l 

D. 4n+1 

3。 如 果 用 户 想 要 匹配 div 元 素 之 后 和 它 同 样 等 级 的 p 元 素 ， 并 且 设 置 字体 为 红色 ， 大 小 
为 20 像素 ， 那 么 选项 是 正确 的 。 

A. div-p{color:red;font-size:20px:} 

B. plid="div"]{color:red:} 

C. div:last-child{color:red:} 

D. p:first-child{color:red: font-size:20px:} 

4. CSS3 新 增 的 选择 器 选择 在 其 父 元 素 中 匹配 EE 的 第 一 个 同类 型 的 子 元 素 ， 
ee E:nth-of-type(1)。 

A. E:nth-child(1) 

B. E:first-of-type 

C. E:only-child 

D. E:only-of-type 

5 


.用 户 要 实现 图 9-18 的 效果 ， 一 定 会 用 到 选择 器 。 


Vos "A 
© [© Rie///D/FirstTesySelector/workhtm 


特别 的 爱 给 特别 的 你 


论 有 承诺 却 被 你 抓 条 至 


没有 了 你 我 的 世界 雨 下 个 不 停 


图 9-18 实现 效果 
A. E:placeholder 
B. E:nots(s) 
C. E::nth-child(3) 
D. E::selection 


上 机 练习 1: 表格 隔行 变色 和 隔 列 变色 效果 


创建 HIML 网 页 ， 在 页 面 中 添加 多 行 多 列 的 表格 ， 利 用 本 章 介绍 的 知识 实现 表格 隔行 变 


色 或 隔 列 变色 的 效果 ， 初 始 效果 如 图 9-19 所 示 ， 鼠 标 悬 停 时 的 效果 如 图 9-20 所 示 。 
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[Css3 实 现 表 入 隔行 所 = x 和 


> © |© file///DyFirstTest/Selector/work.html 


价格 (元 ) | 作者 时 ni 格 (元) | 出 版 时 间 


1830 年 
195! 年 
2010 年 


红 与 村 
妻 轴 里 的 村 刻 青 
从 影子 的 人 HTML5+CSS3 李 准 HTML5+CSS3 。 ”马克 地 稚 


| 上 [ES 
君 吓 山 庄 - 上 I 上 E 


荔 珍 珠 耳 环 的 少女 


1847 年 


图 9-19 初始 效果 图 9-20 是 浮 效果 


上 机 练习 2: 利用 伪 元 素 对 象 选择 器 和 E:checked 实现 选中 效果 
创建 HTML 网 页 ， 在 页 面 中 添加 单 选 按钮 和 复 选 框 ， 当 用 户 选择 某 一 选项 时 更 改 该 项 的 


了 bc 
背景 


中 checked + 伪 元 来 结 习 Xx 司 DD checked + FS53 x 人 
€ > © |® ile///DyFirstTest/Selector/work2.html |] € > © |© fiey///Dy/FirstTest/Selector/work2.html 


厂 点 击 你 喜欢 的 明星 厂 点 击 你 喜欢 的 明星 


。 9 范冰冰 
。 筷 李 冰冰 
。 日 杨 导 


厂 以 下 是 多 选 


。 目 惊 天 魔 盗 团 
。 目 魔 兽 
。 目 北 京 遇 上 西雅图 
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图 9-21 初始 效果 图 9-22 选中 效果 
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学 习 CSS 时 首先 要 掌握 的 是 选择 器 。 除 此 之 外 ， 在 CSS 样式 表 中 ， 属 性 无 处 不 在 ， 即 使 
是 选择 器 ， 仍 然 需要 使 用 属性 。CSS3 不 仅 针对 之 前 版 本 的 某 些 属性 进行 了 完善 ， 同 时 还 增加 
了 许多 属性 。 

本 章 详细 介绍 C553 新 增加 的 背景 、 边 框 、 字 体 、 颜 色 等 相关 属性 ， 例 如 与 背景 有 关 
的 background-clip、background-size、background-origin 属性 ， 与 边框 有 关 的 border- 
radius、box-shadow、border-image 属性 等 。 


HTMLS+CS553+JavaScript 网 页 设计 入 门 与 应 用 
re 


&7) 10.1 新 增 基本 属性 


CSS3 新 增加 了 多 种 属性 ， 本 节 介 绍 常 见 的 文本 属性 、 字 体 属性 、 颜 色 属性 、 边 框 属性 
以 及 背景 属性 。 


叭 )》 10.1.1 文本 属性 
文字 的 基础 属性 主要 包括 字体 、 颜 色 和 文本 ， 首 先 来 了 解 文本 属性 。CSS3 中 除了 新 增 
加 了 一 些 与 文本 有 关 的 属性 外 ， 还 针对 某 些 属性 进行 了 修改 。 
表 10-1 列 出 了 CSS3 中 新 增加 的 文本 属性 、 修 改 的 文本 属性 , 并 对 这 些 属性 进行 解释 说 明 。 
表 10-1 CSS3 中 新 增 和 修改 的 文本 属性 


工 
二 属 性 版 本 说 明 
三 text-transform CSS1/CSS3 | 检索 或 设置 对 象 中 文本 的 大 小 写 
text-align CSS1/CSS3 | 检索 或 设置 对 象 中 内 容 的 对 齐 方式 
六 word-spacing CSS1/CSS3 | 检索 或 设置 对 象 中 单词 之 间 的 最 小 、 最 大 和 最 住 间 际 
| letter-spacing 检索 或 设置 对 象 中 字符 之 间 的 最 小 、 最 大 和 最 佳 间 阶 
Go 
十 text-indent CSS1/CSS3 | 检索 或 设置 对 象 中 文本 的 缩 进 
二 [cssucsss | 
Fy | tav-size 检索 或 设置 对 象 中 制 表 符 的 长 度 
< - 
P| wora-wrap 检索 或 设置 当 内 容 超过 指定 窗口 边界 时 是 否 断 行 ， 备 选 属性 
国医 本 检索 或 设置 当 内 容 超过 指定 窗口 边界 时 是 否 断 行 
9 
Ey | vord-break 检索 或 设置 对 象 中 文本 的 字 内 换行 行为 
cy 检索 或 设置 一 个 块 内 的 最 后 一 行 ( 包 括 块 内 仅 有 一 行文 本 的 
text-align-last CSS3 情况 ， 这 时 既是 第 一 行 也 是 最 后 一 行 ) 或 者 被 强制 打 断 的 行 
的 对 齐 方式 
text-justify 设置 或 检索 对 象 中 调整 文本 使 用 的 对 齐 方式 
text-size-adjust 检索 或 设置 移动 端 页 面 中 对 象 文本 的 大 小 调整 


除了 基本 属性 外 , 还 有 一 些 文本 装饰 属性 。 顾名思义 , 文本 装饰 属性 就 是 用 来 装饰 文本 的 ， 


例如 为 文本 添加 下 划 线 。CSS3 中 修改 和 新 增加 的 文本 属性 如 表 10-2 所 示 。 
表 10-2 CSS3 中 新 增 和 修改 的 文本 装饰 属性 


| | 


CSSI1/CSS3 | 复合 属性 。 检 索 或 设置 对 象 中 文本 的 装饰 
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检索 或 设置 对 象 中 的 文本 装饰 线条 必须 略 过 内 容 中 的 哪些 部 分 


text-shadow CSS3 检索 或 设置 对 象 中 的 文本 是 否 有 阴影 及 模糊 效果 


咱 》10.1.2 字体 属性 


字体 属性 控制 字体 外 观 ， 例 如 “宋体 ”“ 楷 体 ”“ 素 书 ” 等 都 是 字体 的 一 种 。CSS3 中 
新 增加 了 两 个 字体 属性 ， 分 别 是 font-stretch 属性 和 font-size-adjust 属性 。 


font-stretch 属性 


font-stretch 属性 设置 或 检索 对 象 中 的 文字 是 否 横向 拉 伸 变形 。 该 属性 文字 的 拉 伸 是 相对 
于 浏览 器 显示 的 字体 的 正常 宽度 来 说 的 ， 具 体 语法 如 下 : 


font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded 


| expanded | extra-expanded | ultra-expanded 


其 中 ，font-stretch 属性 的 取 值 及 其 说 明 如 下 。 

e@ normal 正常 文字 宽度 。 

ultra-condensed 比 正 常 文字 宽度 窒 4 个 基数 。 
extra-condensed 比 正常 文字 宽度 窒 3 个 基数 。 
condensed 比 正 常 文字 宽度 罕 2 个 基数 。 
semi-condensed 比 正 常 文字 宽度 窗 1 个 基数 。 
semi-expanded ”上 比 正常 文字 宽度 宽 1 个 基数 。 
expanded 比 正 常 文 字 宽度 宽 2 个 基数 。 
extra-expanded 比 正 常 文字 宽度 宽 3 个 基数 。 
e@ ultra-expanded 比 正 常 文字 宽度 宽 4 个 基数 。 


区 font-size-adjust 属性 


font-size-adjust 属性 用 于 设置 或 检索 小 写字 母 x 的 高 度 与 对 象 文字 字号 的 比率 。 基 本 语法 
如 下 : 


font-size-adjust: none | <number> 


其 中 ，none 表示 不 保留 首选 字体 的 x-height，<number> 用 于 定义 字体 的 aspect 值 。 

一 般 情况 下 ， 字 体 的 小 写字 母 x 的 高 度 与 字号 之 间 的 比率 称 为 一 个 字体 的 aspect 值 ， 高 
aspect 值 的 字体 被 设置 为 很 小 的 尺寸 时 会 更 易 阅 读 。 

举例 来 说 ，Verdana 的 aspect 值 是 0.58 (意味 着 当 字 体 尺寸 为 100px 时 ， 它 的 x-height 是 
58px) 。Times New Roman 的 aspect 值 是 0.46， 这 就 意味 着 Verdana 在 小 尺寸 时 比 Times New 
Roman 更 容易 阅读 。 
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用 户 可 以 使 用 下 面 的 公式 为 可 用 字体 推演 出 合适 的 字号 。 

可 用 字体 的 字体 尺寸 = 首选 字体 的 字体 尺寸 * (font-size-adjust 值 / 可 用 字体 的 aspect 值 》 
【 例 10-1] 

以 下 代码 演示 了 font-size-adjust 属性 的 简单 应 用 。 


<style> 

body{ 
font: 14px/1.5 Verdana, Times New Roman; 
font-size-adjust: .58; 

} 

</style> 

<body><p>Hello World!</p></body> 


叫 ) 10.1.3 ”颜色 属性 


如 果 用 户 要 设置 网 页 文本 的 颜色 ， 需 要 用 到 color 属性 ， 除 了 该 属性 外 ，CSS3 还 新 增加 
了 opacity 属性 ， 该 属性 检索 或 设置 对 象 的 透明 度 。opacity 属性 的 语法 如 下 : 


opacity:， <number> 


其 中 ，<number> 使 用 浮 点 数 指定 对 象 的 透明 度 。 值 被 约束 在 0.0 ~ 1.0 范围 ， 如 果 超过 
这 个 范围 ， 其 计算 结果 将 截取 到 与 之 最 相近 的 值 。 


提示 一 一 一 一 一 一 一 一 一 a 
对 于 尚 不 支持 opacity 属性 的 正 浏览 器 ,可 以 使 用 正 私 有 的 滤 镜 属性 来 实现 与 opacity 相同 的 效果 。 
【 例 10-2】 

下 面 示例 演示 了 文字 透明 度 的 应 用 
创建 opacity.html 网 页 ， 在 页 面 中 添加 两 个 div 元 素 ， 这 两 个 元 素 用 于 显示 文字 透明 度 的 
效果 。 完 整 代码 如 下 : 
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<style> 
h1 { margin: 10px 0; font-size: 16px; } 
‘test, .test2 { width: 300px; height: 150px; padding: 10px; } 
,test { background:#050; } 
‘test2{ 
margin: -120px 0 0 50px; 
background: #000; 
filter: alpha(opacity=50); 
‘opacity: .5; 
color: #fff; 
} 
</style> 
<body> 
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<h1> 下 例 是 一 个 文字 透明 度 的 效果 : </h1> 
<div class="test"> 不 透明 度 为 100% 的 box</div> 
<div class="test2"> 不 透明 度 为 50% 的 box</div> 
</body> 


咱 》10.1.4 边框 属性 
网 页 设计 布局 少不了 边框 ， 边 框 属性 用 来 设置 一 个 元 素 的 边线 。 边 框 以 何 种 方式 显示 、 
边框 颜色 、 边 框 宽度 等 都 属于 边框 样式 ，CSS3 新 增 的 边框 属性 及 其 说 明 如 表 10-3 所 示 。 
表 10-3 CSS3 新 增 的 边框 属性 及 其 说 明 


属 性 说 明 
border-radius CSS3 设置 或 检索 对 象 使 用 圆 角 边 框 
border-top-left-radius CSS3 设置 或 检索 对 象 左上 角 圆 角 边框 


border-top-right-radius CSS3 设置 或 检索 对 象 右上 角 圆 角 边 框 
border-bottom-left-radius “| CSS3 设置 或 检索 对 象 左 下 角 贺 角 边 杠 
border-bottom-right-radius | CSS3 设置 或 检索 对 象 右 下 角 贺 角 边 杠 


于 
讨 


box-shadow CSS3 设置 或 检索 对 象 阴 影 

border-image CSS3 设置 或 检索 对 象 的 边框 样式 使 用 图 像 来 填充 
border-image-source CSS3 设置 或 检索 对 象 的 边框 是 否 用 图 像 定义 样式 或 图 像 来 源 路 径 
border-image-slice CSS3 设置 或 检索 对 象 的 边框 背景 图 的 分 割 方式 
border-image-width CSS3 设置 或 检索 对 象 的 边框 厚度 

border-image-outset CSS3 设置 或 检索 对 象 的 边框 背景 图 的 扩展 

border-image-repeat CSS3 设置 或 检索 对 象 的 边框 图 像 的 平 铺 方式 


吓 》10.1.5 ”背景 属性 


在 HIML 网 页 中 ， 将 整个 页 面 背 景 显示 为 蓝 色 ,或 者 在 底部 区 域 添 加 背景 图 片 等 ， 这 都 
需要 用 到 与 背景 有 关 的 属性 。CSS3 新 增加 的 3 个 背景 属性 及 其 说 明 如 下 。 

e background-origin 属性 ”设置 或 检索 对 象 的 背景 图 像 显 示 的 原点 。 

@ background-clip 属性 ”设置 或 检索 对 象 的 背景 的 绘制 区 域 。 

® background-size 属性 ”设置 或 检索 对 象 的 背景 图 像 的 尺寸 大 小 。 


叫 )》 10.1.6 ”实践 案例 : 用 JS 判断 浏览 器 是 否 支持 某 属性 


CSS3 的 出 现 让 浏览 器 的 表现 更 加 丰富 多 彩 ， 但 是 并 非 所 有 的 浏览 器 版 本 都 支持 CSS3 中 
新 增加 的 属性 。 不 同 内 核 的 浏览 器 ， 将 导致 浏览 器 定义 的 私有 属性 也 不 同 。 如 果 用 户 不 确定 
浏览 器 是 否 支持 某 个 属性 ， 首 先 需要 进行 判断 ， 那 么 应 该 如 何 判断 呢 ? 

判断 浏览 器 是 否 支持 某 个 属性 的 方法 有 多 种 ， 可 以 使 用 Can IUse 工具 检测 〈 第 1 章 有 介 
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绍 ) ， 可 以 使 用 CSS3 新 增 的 @supports 规则 ， 当 然 还 可 以 使 用 JavaScript 脚本 。 

本 小 节 利用 JavaScript 脚本 代码 判断 浏览 器 是 否 支持 某 个 属性 。 首 先 需要 创建 supportCSS 
30 脚本 函数 ， 用 于 判断 浏览 器 是 否 支持 某 个 CSS3 属性 。supportCSS30 脚本 函数 需要 传 入 一 
个 参数 ， 该 参数 代表 属性 名 称 。 另 外 ， 函 数 的 最 终 返 回 结果 为 true 或 false，true 表示 支持 ， 
false 表示 不 支持 。 脚 本 代码 如 下 : 


<script> 
function supportCSS 3(style) { 
var prefix = ["webkit', 'Moz', 'ms', '0'], 
i, humpstring = [], htmlStyle = document.documentElement.style, 
_toHumb = function (string) { 
return string.replace(/-(\w)/g, function ($0, $1) { 
return 51.toUpperCase(); 
外 
} 
for (iin prefix) 
humpstring.push(_toHumb(prefix[i] + '-' + style)); 
humpstring.push(_toHumb(style)); 
for (iin humpSstring) 
if (humpString[i] in htmlStyle) return true; 
return false; 
} 


</script> 


最 后 调用 该 函数 进行 测试 ， 并 将 测试 的 结果 输出 。 以 下 代码 判断 浏览 器 是 否 支 持 text- 
size-adjust 属性 。 
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alert(supportCSS 3('text-size-adjust')); 


ss » 
9097 10.2 设置 文本 样式 
简单 了 解 CSS3 新 增加 的 文本 属性 、 字 体 属性 、 颜 色 属性 等 内 容 后 ， 本 章 针 对 常用 的 与 
文本 有 关 的 属性 进行 详细 介绍 。 
叫 )》 10.2.1 文本 换行 设置 
HTML 网 页 中 少不了 文本 模块 ， 而 文本 模块 区 域 少不了 换行 。 文 本 换行 涉及 两 个 属性 : 
word-wrap 属性 和 word-break 属性 。 


项 区 word-wrap 属性 
word-wrap 属性 设置 或 检索 当 内 容 超 过 指定 容器 的 边界 时 是 否 断 行 。 在 CSS3 中 ， 将 
word-wrap 属性 更 改 为 overflow-wrap 属性 。word-wrap 属性 的 说 明 如 下 : 
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word-wrap:normal | break-word 


其 中 , normal 允许 内 容 顶 开 或 溢出 指定 的 容器 边界 .break-word 表示 内 容 将 在 边界 内 换行 。 
如 果 需 要 ， 单 词 内 部 也 允许 断 行 。 
【 例 10-3] 
下 面 示例 演示 了 overflow-wrap 属性 的 使 用 。 
创建 wordwrap.html 网 页 ， 在 网 页 的 主体 部 分 添加 项 目 列表 元 素 ， 用 于 演示 Word-wrap 属 
性 。 代 码 如 下 : 


<center><h2> 一 粒 沙 子 </h2></center> 
<ul class="test"> 
<liclass="normal"> 
<strong>normal: </strong><p>zheshiyiduanhenchangdewenzimeiyourenhebiaodianfuhao 
</p> 
</li> 
<liclass="normal"> 
<strong>normal: </strong><p> 从 一 粒 沙子 看 到 一 个 世界 (To see a world in a grain of sand) 
从 一 灯 野 花 看 到 一 个 天 堂 (And a heaven in a wild flower) </p> 
</li> 
<liclass="break-word"> 
<strong>break-word: </strong> 
<p>zheshiyiduanhenchangdewenzimeiyourenhebiaodianfuhao</p> 
</li> 
<liclass="break-word"> 
<strong>break-word: </strong><p> 这 是 一 段 很 长 的 文字 没有 任何 标点 符号 zheshiyiduanhen 
changdewenzimeiyourenhebiaodianfuhao</p> 
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</li> 
</ul> 


为 上 述 元 素 添加 样式 代码 ， 指 定 word-wrap 属性 的 取 值 分 别 为 normal 和 break-word。 代 
码 如 下 : 


<style type="text/css"> 

ul.test {width:70%;margin:0 auto} 

ul.test li{width:100%;} 

ul.test {margin:0 auto} 

.test p{width:350px;border:1px solid #000;background-color:#eee;} 
.normal p{word-wrap:normal;} 

.break-word p{word-wrap:break-word;} 


</style> 
word-wrap 可 以 控制 是 否 “ 为 词 断 行 ”， 用 于 设置 或 检索 当前 行 超过 指定 容器 的 边界 时 


是 否 断 开 转 行 。 中 文 没有 任何 问题 ， 英 文 语句 也 没 问 题 。 但 是 对 于 长 串 的 英文 ， 就 不 起 作用 ， 
如 图 10-1 所 示 。 
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四 word-wrap 尾 性 


x 


C | © file:///DyFirstTest/ten/wordwrap.html 


一 粒 沙子 


» normal : 


Eheshyiduanhenchangdewenzimeiyourenhedebiaodianfuhao 


内 一 粒 少 子 看 到 一 个 世界 (To see a world in a 
lgrain of sand ) 从 一 条 野花 看 到 一 个 天 堂 ( And 


lB heaven in a wild flower ) 


break-word : 


zheshiyiduanhenchangdewenzimeiyourenhed| 
lebiaodianfuhao 


® break-word : 


是 一 段 很 长 的 文字 没有 任何 标点 符号 
heshiyiduanhenchangdewenzimeiyourenhed| 
biaodianfuhao 


图 10-1 word-wrap 属性 效果 


a word-break 属性 
word-break 属性 的 基本 语法 如 下 : 


word-break:normal | keep-all | break-all 


其 中 ，word-break 属性 的 取 值 说 明 如 下 。 

e normal 依照 亚洲 语言 和 非 亚 洲 语言 的 文本 规则 ， 人 允许 在 字 内 换行 。 

@ keep-all 与 所 有 非 亚洲 语言 的 normal 相同 。 对 于 中 文 、 韩 文 、 日 文 ， 不 允许 字 断 开 。 
适合 包含 少量 亚洲 文本 的 非 亚 洲 文 本 。 如 果 要 解决 因 页 面 中 出 现 连 续 无 意义 的 长 字符 而 
造成 的 布局 错乱 问题 ， 应 该 使 用 break-all 属性 值 。 

@ break-all 与 亚洲 语言 的 normal 相同 。 人 允许 非 亚洲 语言 文本 行 中 的 任意 字 内 断 开 。 该 值 
适合 包含 一 些 非 亚洲 文本 的 亚洲 文本 ， 例 如 在 连续 的 英文 字母 间断 行 。 

【 例 10-4] 

下 面 示例 演示 了 word-break 属性 的 使 用 。 

创建 wordbreak.html 网 页 ， 该 网 页 的 内 容 是 在 上 个 例子 的 基础 上 进行 的 更 改 ， 代 码 非常 

简单 ， 这 里 不 再 详细 解释， 直接 给 出 代码 。 
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<style type="text/css"> 

ul.test {width:70%;margin:0 auto} 

ul.test li{width:100%;} 

ul.test {margin:0 auto} 

.test p{width:350px;border:1px solid #000;background-color:#eee;} 
.normal p{word-break:normal;} 

.break-all pf{word-break:break-all;} 
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.keep-all p{word-break:keep-all;} 
</style> 
</head> 
<body> 


<div style="background-image:url(img/bg5.jpg); background-repeat:no-repeat; background-position:center; 
margin:0 auto; width:729px; height:500px; border:3px; solid green;"> 
<center><h2> 一 粒 沙 子 </h2></center> 
<ul class="test"> 
<liclass="normal"> 
<strong>normal: </strong> 
<p>zheshiyiduanhenchangdewenzimeiyourenhebiaodianfuhao</p> 
</li> 
<liclass="normal"> 
<strong>normal; </strong><p> 从 一 粒 沙 子 看 到 一 个 世界 (To see a world in a grain of 
sand) 从 一 们 野花 看 到 一 个 天 堂 (And a heaven in a wild flower) </p> 
</li> 
<liclass="break-all"> 
<strong>break-all: </strong> 
<p>zheshiyiduanhenchangdewenzimeiyourenhebiaodianfuhao</p> 
</li> 
<liclass="break-all"> 
<strong>break-all: </strong><p> 这 是 一 段 很 长 的 文字 没有 任何 标点 符号 zheshiyiduanhen 
changdewenzimeiyourenhebiaodianfuhao</p> 
</li> 
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</ul> 
</body> 
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运行 wordbreak.html 页 面 ， 效 果 如 图 10-2 所 示 。 
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0 word-breakBt x 
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从 一 粒 沙子 看 到 一 个 世界 (To see a world in a 
lgrain of sand ) 从 一 条 野花 看 到 一 个 天 堂 ( And 
la heaven in a wild flower ) 


break-all : 


Eheshiyiduanhenchangdewenzimeiyourenhed| 
lebiaodianfuhao 


break-all : 


入 是 一 段 很 长 的 文字 没有 任何 标点 符号 zheshiyid 
luanhenchangdewenzimeiyourenhedebiaodia 
nfuhao 


图 10-2 word-break 属性 的 使 用 
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仔细 观察 图 10-1 和 图 10-2， 可 以 看 出 word-break 属性 取 值 break-all 时 表示 断 开 单 词 。 
在 单词 到 达 边界 时 ， 下 个 字母 将 自动 转 到 下 一 行 。word-break:break-all 主要 解决 了 长 串 英文 
的 问题 ， 恰 恰 弥 补 了 上 面 word-wrap:break-word 对 于 长 串 文字 不 起 作用 的 缺陷 。 
叫 )》 10.2.2 文本 对 齐 方式 

CSS3 新 增加 了 text-justify 属性 ， 该 属性 调整 或 检索 对 象 内 文本 的 对 齐 方式 。 基 本 语法 
如 下 : 


text-justify:auto | none | inter-word | inter-ideograph | inter-cluster | distribute | kashida 


其 中 ，text-justify 属性 的 取 值 说 明 如 下 。 

e auto ”人 允许 浏览 器 用 户 代理 确定 使 用 的 两 端 对 齐 法 则 。 

e@ none 禁止 两 端 对 齐 。 

e inter-word 通过 增加 字 之 间 的 空格 来 对 齐 文本 。 该 行为 是 对 齐 所 有 文本 行 最 快 的 方法 ， 
它 的 两 端 对 齐 行为 对 段落 的 最 后 一 行 无 效 。 

e inter-ideograph ”为 表意 字 文 本 提供 两 端 对 齐 , 自 适应 增加 或 减少 表意 字 和 词 间 的 空格 。 

®@ inter-cluster 调整 文本 词 间 空 格 的 行 。 这 种 调整 模式 可 用 于 优化 亚洲 语言 文档 。 

e distribute ”通过 增加 或 减少 字 或 字母 之 间 的 空格 来 对 齐 文本 ， 适 用 于 东亚 文档 ， 尤 其 是 
泰国 。 

e@ kashida 通过 拉 长 选 定点 的 字符 来 调整 文本 。 这 种 调整 模式 是 特别 为 阿拉 伯 脚 本 语言 提 
供 的 。 

【 例 10-5】 

以 下 示例 代码 演示 test-justify 属性 的 使 用 。 


<style> 

div{width:300px;margin-top:10px;background:#aaa;text-align:justify;text-justify:inter-word;} 

</style> 

<body> 

<div> 我 是 第 一 行 ， 后 面 紧 接着 强制 换行 一 些 随意 的 文字 内 容 一 些 随意 的 文字 内 容 一 些 随意 的 文字 内 
容 一 些 随意 的 文字 内 容 一 些 随意 的 文字 内 容 一 些 随 意 的 文字 内 容 我 后 面 紧 跟着 强制 换行 一 些 随意 的 文字 
内 容 一 些 随意 的 文字 内 容 一 些 随意 的 文字 内 容 一 些 随意 的 文字 内 容 一 些 随意 的 文字 内 容 我 是 最 后 一 行 </ 
div> 

</body> 


-个 注意 -一 一 一 一 一 一 一 一 一 -一 一 一 


由 于 test-justify 属性 会 影响 HTML 网 页 的 文本 布局 ， 因 此 要 设置 这 个 属性 ， 必 须 将 text-align 
| 属性 的 值 设置 为 justify。 | 
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叫 )》 10.2.3 文本 的 单个 阴影 

在 CSS2 中 , 如 果 要 实现 文字 的 阴影 效果 , 一 般 是 使 用 Photoshop 等 软件 。 但 是 在 CSS 3 中 ， 
阴影 效果 用 一 个 text-shadow 属性 就 能 实现 了 。 简 单 的 几 句 代码 就 可 以 替代 Photoshop 等 工具 ， 
简单 好 用 。 
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text-shadow 属性 的 常用 语法 如 下 : 


text-shadow:x-offset y-offset blur color; 


其 中 ，text-shadow 属性 的 取 值 说 明 如 下 
®@ Xx-offset 水 平 阴影 。 表 示 阴 影 的 水 平 偏 移 距离 ， 单 位 可 以 是 px、em 或 百分比 等 。 如 果 
值 为 正 ， 则 阴影 向 右 偏 移 ， 如 果 值 为 负 ， 则 阴影 向 左 偏 移 。 
@ y-offset 垂直 阴影 。 表 示 阴 影 的 垂直 偏 移 距离 ， 单 位 可 以 是 px、em 或 百分比 等 。 如 果 
值 为 正 ， 则 阴影 向 下 偏 移 ， 如 果 值 为 负 ， 则 阴影 向 上 偏 移 。 
e blur 模糊 距离 .表示 阴影 的 模糊 程度 , 单位 可 以 是 px、em 或 者 百分比 等 。blur 值 不 能 为 负 。 
如 果 值 越 大 , 则 阴影 越 模糊 ; 如 果 值 越 小 , 则 阴影 越 清晰 。 当然 , 如 果 不 需 要 阴影 模糊 效果 ， 
可 以 将 blur 值 设置 为 0。 
e@ color 阴影 的 颜色 。 
【 例 10-6] 
下 面 示例 演示 了 text-shadow 属性 的 使 用 。 
创建 textshadow.html 网 页 ， 在 页 面 中 添加 h2 元 素 和 p 元素， 前 者 显示 文章 的 标题 ， 后 
者 显示 文章 的 段落 内 容 。 为 h2 元 素 添加 text-shadow 属性 ， 将 该 属性 的 水 平 阴影 和 垂直 阴影 
设置 为 5 像素 ， 模 糊 距离 设置 为 2 像素 ， 阴 影 颜色 设置 为 灰色 gray。 样 式 代 码 如 下 : 


h21{ 
text-shadow:5px 5px 2px gray; 
-webkit-text-shadow: 5px 5px 2px gray; 
-moz-text-shadow:5px 5px 2px gray; 
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沿 着 三 月 的 时 光 ， 我 翻阅 着 曾经 ， 那 一 份 初 相遇 , 晚 春 ， 初 夏 , 那 
些 浓 浓 的 情怀 ， 也 便 元 自 婉约 了 心事 ， 绿 肥 红 瘦 。 始终 相信 ,文字 是 有 
色彩 的 。 


静坐 于 三 月 的 一 庙 ， 看 城市 的 烟火 最 妙 了 眸 光 ， 心 总 会 在 亲 那 
间 ， 涌 起 莫名 的 柔情 与 感动 . 
或 许 是 厌倦 了 城市 的 嘻 喷 ， 总 喜欢 寻 一 处 清 况 ， 牛 花 倚 草 ,无语 合 


笑 ; 寻 梦 ,何须 摊 一 支 长 篇 ? 在 斑 精 里 放歌 ， 那些 红 的 花 ， 绿 的 树 , 白 
的 云 ， 蓝 的 天 ， 都 是 笔下 最 真实 的 授 遥 …- 


图 10-3 文本 阴影 和 模糊 效果 


【 例 10-7】 
text-shadow 属性 的 功能 非常 强大 ， 只 要 设置 颜色 的 取 值 和 阴影 方向 ， 并 掌握 有 关 的 技巧 ， 
就 可 以 实现 非常 美丽 的 效果 ， 例 如 是 起 和 四 陷 等 。 下 面 是 在 上 个 例子 的 基础 上 更 改 h2 样式 的 
代码 。 
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h2{ 
display:inline-block; 
padding:20px; 
font-size:40px; 
font-family:Verdana; 
font-weight:bold; 


background-color:#CCC; 

color:#ddd; 

text-shadow:-1px 0 #333, /* 向 左 阴影 */ 
0 -1px #333, /* 向 上 阴影 */ 
1px 0 #333, /* 向 右 阴影 */ 
0 1px #333; /* 向 下 阴影 */ 


} 


运行 HTML 网 页 ， 上 述 样式 代码 的 效果 如 图 10-4 所 示 。 


[ELEISIEZ 可 


DtetshadowB x \ 
€ 3 © | file///D/FirstTest/ten/textshadow2.html 


沿 荐 三 月 的 时 光 ,我 翻阅 着 曾经 ， 那 一 份 初 相遇 ,了 晚 春 ， 初 夏 , 那 
些 浓 浓 的 情怀 ， 也 便 元 自 婉约 了 心事 ， 绿 把 红 疯 。 始终 相信 ,文字 是 有 
色彩 的 。 

静坐 于 三 月 的 一 端 ， 看 城市 的 烟火 曼妙 了 眸 光 , 心 ， 总 会 在 测 那 
间 ， 涵 起 莫名 的 柔情 与 感动 。 
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图 10-4 文本 阴影 和 模糊 效果 2 
【 例 10-8】 


为 了 让 表现 更 加 丰富 ， 每 个 方向 上 阴影 的 颜色 可 以 有 不 同 的 设置 。 如 果 将 向 左 和 向 上 的 
阴影 颜色 设置 为 白色 ， 文 字 就 会 有 凸 起 的 效果 。 修 改 text-shadow 属性 如 下 : 


text-shadow: -lpx 0 #FFF, /* 向 左 阴 影 */ 
0 -1px #FFF, 详 向 上 阴影 
1px 0 #333, /* 向 右 阴影 */ 
0 1px #333; 人 # 向 下 阴影 六 


刷新 HIML 网 页 ， 上 述 代码 的 凸 起 效果 如 图 10-5 所 示 。 


【 例 10-9】 
如 果 将 向 右 和 向 下 的 阴影 颜色 设置 为 和 白色， 文字 就 会 有 止 陷 的 效果 。 修 改 text-shadow 属 
性 如 下 : 
text-shadow:-1px 0 #333, /* 向 左 阴 影 */ 
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一 一 


0 -1px #333, /#* 向 上 阴影 坟 
1px O#FFF, /* 向 右 阴影 */ 
0 1px #FFF; /* 向 下 阴影 */ 


刷新 HIML 网 页 ， 上 述 代码 的 凹陷 效果 如 图 10-6 所 示 。 


褒 看 三 月 的 时 光 ， 我 副 阅 看 戎 经 ， 那 一 份 初 相 运 ， 跨 春 , 初 豆 , 那 沿 看 三 月 的 8j 光 ,我 德 赔 看 曾经 , 那 一 份 初 相 吉 , 唤 堆 ， 初 豆 , 那 
些 浪 浪 和 9 情怀 ， 也 便 克 后 物 约 了 心事 ， 妈 咎 红 病 。 始 符 相 信 ,文子 号 有 此 六 的 情怀 ， 也 便 J[ 请 综 约 了 心事 绿 权 红 病 。 始终 相信 ,文字 号 有 


图 10-5 凸 起 效果 10-6 思 陷 效果 


咱 ) 10.2.4 文本 的 多 个 阴影 

在 CSS3 中 ， 可 以 使 用 text-shadow 属性 给 文字 指定 多 个 阴影 ， 并 且 针对 每 个 阴影 使 用 不 
同 的 颜色 。 也 就 是 说 ，text-shadow 属性 值 可 以 是 一 个 以 英文 逗号 隔 开 的 “ 值 列 表 ”。 

当 text-shadow 属性 值 为 “ 值 列 表 ” 时 ， 阴 影 效果 会 按照 给 定 的 值 顺序 应 用 到 该 元 素 的 文 
本 上 ， 因 此 有 可 能 出 现 互相 覆盖 的 现象 。 但 是 text-shadow 属性 永远 不 会 覆盖 文本 本 身 ， 阴 影 
效果 也 不 会 改变 边框 的 尺寸 。 

【 例 10-10] 

继续 在 前 面 例子 的 基础 上 进行 更 改 ， 为 text-shadow 属性 添加 多 个 阴影 。 代 码 如 下 : 


h2{ 
font-size:40px; 
text-shadow:4px 4px 2px gray, 6px 6px 2px gray, 8px 8px 8px gray; 
-webkit-text-shadow: 4px 4px 2px gray, 6px 6px 2px gray, 8px 8px 8px gray; 
-moz-text-shadow: 4px 4px 2px gray, 6px 6px 2px gray, 8px 8px 8px gray; 
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运行 上 述 代 码 ， 最 终 的 效果 如 图 10-7 所 示 。 


了 D text-shadow 必 性 x 业 
€ 了 © |O fileyW/DYFirstTest/ten/textshadow3 html 


沿 着 三 月 的 时 光 ， 我 翻阅 着 普 经 ， 那 一 份 初 相遇 , 晚 春 ,初夏 , 那 
些 浓 浓 的 情怀 ， 也 便 克 自 婉约 了 心事 , 绿肥 红 瘦 。 始终 相信 , 文字 是 有 


静坐 于 三 月 的 一 端 看 城市 的 烟火 曼妙 了 了 眸 光 ， 心 ， 总 会 在 刹那 
间 , 涌 起 莫名 的 柔情 与 感动 。 


图 10-7 text-shadow 属性 的 多 个 取 值 
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咱 )》 10.2.5 “实践 案例 ;制作 火焰 字 


text-shadow 属性 的 功 全 ee 通过 设置 该 属性 不 仅 可 以 实现 简单 的 文字 效果 ， 还 
可 以 实现 多 重 阴 影 效 果 。 当 然 ， 还 可 以 将 绘画 字母 作为 轮廓 设置 阴影 。 本 节 利 用 text- 
shadow 属性 制作 pa hd 火焰 字 ， 如 图 10-8 所 示 。 


LajJLE[IGTLX 


中 实践 实例 : 制作 火 作 字 x 


加 CG | © file///D:/FirstTest/ten/huoyan.html 廊 | © 


图 10-8 制作 火焰 字 

仔细 观察 火焰 文字 可 以 发 现 ， 其 火焰 颜色 并 不 单纯 ， 而 是 从 内 焰 的 黄 
慢 过 渡 到 外 焰 的 红色 。 利 用 CSS3 的 text-shadow 属性 实现 文字 阴影 时 ， 需 要 定 
义 7 层 层 夫 阴影 ， 用 阶梯 变化 的 颜色 和 一 定 的 阴影 半 径 模拟 火焰 从 里 到 外 的 颜色 
渐变 ， 主 要 操作 步骤 如 下 
01 创建 huoyan. html 网 页 ， 在 页 面 中 添加 hl 元 素 ， 设 置 class 属性 。 代 码 如 下 : 


慢 
受 


EH 


| [下 
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<h1 class="fire"> 邂逅 文字 的 芬芳 </h1> 


3 为 hl 元 素 添加 样式 ， 设 置 文字 的 对 齐 方式 、 字 体 大 小 、 颜 色 以 及 阴影 。 样 式 代码 如 下 : 


‘fire { 
text-align: center; 
margin: 100px auto; 
font-family: "Comic Sans MS"; 
font-size: 80px; 
color: white; 
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px 
#ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0Oe; 
) 


0 呈 将 页 面 的 body ea 色 ， 代 码 不 再 显示 。 
0 区 运行 huoyan.html 页 面 ， 观 察 效 果 
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&]) 10.3 ”设置 边框 样式 


CSS3 针对 边框 增加 了 丰富 的 修饰 效果 ， 使 得 网 页 更 加 美观 。 下 面 介绍 常用 的 CSS3 边框 


属性 。 


川 )》 10.3.1 边框 圆 角 属性 


从 用 户 体 验 和 心理 来 说 ， 圆 角 效 果 往 往 更 为 美观 大 方 。 在 CSS2.1 中 ， 为 元 素 实现 圆 角 
效果 是 很 头疼 的 一 件 事 。 老 办 法 都 是 使 用 背景 图 片 来 实现 ， 制 作 起 来 比较 麻烦 。 但 是 CSS3 
新 增 的 border-radius 属性 ， 完 美 地 解决 了 圆 角 效果 难以 实现 的 问题 。 

border-radius 属性 的 完整 语法 如 下 : 


border-radius:[ <length> | <percentage> ]{1,4} [/ [<length> | <percentage> ]{1,4} ]? 


其 中 ，<length> 用 长 度 值 设置 对 象 的 圆 角 半径 ， 不 允许 为 负 值 ，<percentage> 用 百分比 
设置 对 象 的 圆 角 半径 长 度 ， 不 允许 为 负 值 。 

从 border-radius 属性 的 语法 中 可 以 发 现 ， 该 属性 提供 了 两 个 参数 ， 这 两 个 参数 以 “/” 分 
隔 , 每 个 参数 允许 设置 1 ~ 4 个 参数 值 , 第 一 个 参数 表示 水 平 半径 , 第 二 个 参数 表示 垂直 半径 ， 
如 第 二 个 参数 省 略 ， 则 默认 等 于 第 一 个 参数 。 


全 基本 点 用 
无 论 是 水 平 半 径 参 数 还 是 


E 直 


E 径 参数 ， 为 它们 指定 参数 值 时 ， 需 要 遵循 以 下 情况 。 


@ 如 果 只 提供 一 个 值 ， 将 用 于 全 部 的 4 个 角 。 

e@ 如 果 提供 两 个 值 ， 第 一 个 用 于 上 左 ( top-left ) 、 下 右 ( bottom-right ) ， 第 二 个 用 于 上 右 
(top-right ) 、 下 左 (bottom-left ) 。 

@ 如 果 提 供 三 个 , 第 一 个 用 于 上 左 ( top-left ), 第 二 个 用 于 上 右 ( top-right ) 下 左 ( bottom-left )， 
第 三 个 用 于 下 右 ( bottom-right ) 。 

@ 如果 提 供 4 个 参数 值 ， 将 按 上 左 (top-left )、 上 右 (top-right ) 、 下 右 (bottom-right ) 、 下 
左 (bottom-left ) 的 顺序 作用 于 4 个 角 。 


【 例 10-11] 


创建 radius.html 页 面 ， 在 页 面 中 添加 h2、div 和 p 元 素 。 其 中 ，h2 表示 文章 标题 ，div 
用 于 显示 整 篇 文章 ，p 显示 文章 段落 。 整 篇 文章 显示 时 需要 设置 div 的 样式 ， 指 定 边框 的 圆 角 
半径 为 10 像素 ， 同 时 指定 边框 的 宽度 、 颜 色 和 样式 等 。 代 码 如 下 : 


.content{ 


width:70%; margin:0 auto; border:2px solid blue; 


border-radius:10px; 
-webkit-border-radius:10px; 
-moz-border-radius:10px; 
-0-border-radius:10px; 


} 


运行 radius.html 页 面 ， 效 果 如 


让 设置 圆 角 */ 

广 Chrome 浏览 器 */ 
/* Firefox 浏览 器 */ 
/* Opera 浏览 器 */ 


图 10-9 所 示 。 
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口 border-radiusB 作 xx WE 
GC | © file///DyFirstTest/ten/radius.html 


最 初 的 原始 ,最初 的 真实 ， 才 是 最 美的 现在 ， 而 不 是 古老 的 过 去 ， 
虚幻 的 未 来 ; 最 初 的 原始 ,最初 的 真实 ， 才 在 最 美的 白天 ， 而 不 在 古老 


的 梦 中 ， 虚 幻 的 黑夜 。 
最 初 的 美 ， 在 于 现在 的 白天 ; 最 初 的 美 ， 它 不 在 过 去 的 梦 中 ， 也 不 
在 未 来 的 黑夜 。 


图 10-9 radius 设置 圆 角 样式 


氏 给 制 国 形 

用 户 可 以 通过 设置 border-radius 属性 的 各 个 参数 值 以 实现 不 同 的 效果 。 除了 基本 效果 外 ， 
border-radius 属性 还 可 用 于 多 个 地 方 。 在 网 页 开发 中 ， 我 们 会 遇 到 很 多 种 需要 使 用 圆 形 图 案 
的 情况 ， 例 如 圆 形 的 头像 图 案 、 圆 形 进度 统计 等 ， 都 可 以 用 到 该 属性 。 

【 例 10-12]】 

使 用 border-radius 属性 设置 圆 形 时 ， 其 原理 是 把 边 角 弯 曲 成 一 条 圆 绝 。 本 例 通过 border- 
radius 属性 实现 一 些 简 单 的 圆 ， 只 需要 把 border-radius 的 大 小 设置 为 div〈 正 方形 ) 高 的 一 半 
就 可 以 了 。 实 现 步骤 如 下 。 

IO 外 创建 radius-arc.html 网 页 ， 在 页 面 中 添加 3 个 div 元 素 。 代 码 如 下 : 


<div id="circle1" class="circle1"></div> 


circle2" class="circle2"></div> 
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<div id="circle3" class="circle3"></div> 


四 加 分 别 为 上 述 div 元 素 设置 样式 ， 指 定 元 素 的 宽度 和 高 度 ， 然 后 分 别 设置 border-radius 
属性 的 值 。 代 码 如 下 : 


<style type="text/css"> 

div{width:160px; height:160px; float:left;margin:35px;} 

.circlel{fborder-radius:50%;border:1px solid red;} 

.Circle2{border-radius:50%;border:5px solid red;} 

.Circle3{border-right:20px solid red;border-radius:50%;position:relative;display: table-cell;vertical-align: 
middle;} 

</style> 


大 一 运行 本 例 ， 实 现 效果 如 图 10-10 所 示 。 
仔细 观察 本 例 的 代码 和 效果 图 可 以 发 现 ， 本 例 在 div 的 基础 上 增加 border-radius:50% 属 
性 可 以 绘制 一 个 简单 的 圆 形 ， 在 该 基础 上 增加 边框 宽度 可 以 绘制 一 个 圆 环 。 那 么 ， 为 什么 会 
出 现 镰刀 形状 的 图 形 呢 ? 这 是 因为 border-radius 都 是 圆 角 ， 而 角 是 由 两 个 边 组 成 的 ， 但 是 只 
设置 了 border-right, 右上 角 和 右 下 角 只 有 右边 作为 其 中 一 条 边 , 导致 其 他 边 的 宽度 一 直 在 衰减 。 
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“ CC | © filey//D:/FirstTest/ten/radius-arc.html 六 | 四 


As 


图 10-10 ”border-radius 实现 圆 形 效果 


区 border-radius 的 派生 属性 

用 户 可 以 直接 通过 border-radius 属性 设置 边框 4 个 角 的 圆 角 效果 ， 当 然 也 可 以 分 开设 置 
角 效果 。border-radius 属性 和 margin、padding 等 属性 一 样 属于 复合 属性 ， 因 此 可 以 将 该 属 
性 分 开 ， 分 别 为 4 个 角 设 置 相应 的 圆 角 值 ， 这 些 属性 分 别 是 border-top-right-radius 属性 〈 右 
上 角 )、border-bottom-right-radius ( 右 下 角 )、border-bottom-left-radius( 左 下角) 和 border- 
top-left-radius (左上 角 )。 

【 例 10-13】 
在 前 面 例子 的 基础 上 ， 设 置 border-radius 的 派生 属性 实现 气泡 对 话 框 效 果 。 
园 友 创建 radius-qp.html 页 面 ， 在 页 面 中 添加 以 下 代码 


<div class="test"> 
<span class="bot"></span> 
<span class="top"></span> 
繁华 纷纷 的 世界 ， 你 是 否 忘记 最 初 的 梦想 


</div> 
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加 加 为 上 述 元 素 设置 样式 ， 首 先 设置 外 层 div 元 素 的 边框 样式 ， 如 宽度 、 背 景 颜色 、 贺 
角 半 径 等 。 样 式 代码 如 下 : 


‘test{ 
width:300px; padding:80px 20px; margin-left:100px; background:#beceeb; 
-webkit-border-top-left-radius:220px 120px; 
-webkit-border-top-right-radius:220px 120px; 
-webkit-border-bottom-right-radius:220px 120px; 
-webkit-border-bottom-left-radius:220px 120px; 
-moz-border-radius:220px / 120px; 
border-radius:220px / 120px; 
position:relative; 


} 


OS) 为 div 元 素 下 的 span 元 素 设置 样式 ， 如 宽度 、 圆 角 半 径 、 高 度 等 。 代 码 如 下 : 
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‘test span{width:0; height:0; font-size:0; background:#beceeb; overflow:hidden; position:absolute;} 


.test span.bot{ 
width:30px; height:30px; left:10px; bottom:-20px; 
-moz-border-radius:30px; 
-webkit-border-radius:30px; 
border-radius:30px; 


} 

,test span.top{ 
width:15px; height:15px; left:0px; bottom:-40px; 
-moz-border-radius:15px; 
-webkit-border-radius:15px; 
border-radius:15px; 

} 


看 妈 运行 HTML 网 页 观察 气泡 效果 ， 如 图 10-11 所 示 。 
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繁华 纷纷 的 世界 ， 你 是 否 忘记 最 初 的 梦想 


是 初 的 原始 ， 最 初 的 真实 ， 才 是 最 美的 现在 ， 而 不 是 古老 的 过 去 ， 
幻 的 未 来 ; 最 初 的 原始 ,最初 的 真实 ， 才 在 最 美的 白天 ， 而 不 在 古老 
的 梦 中 ， 虚 幻 的 黑夜 。 


最 初 的 美 ， 在 于 现在 的 白天 ; 最 初 的 美 ， 它 不 在 过 去 的 梦 中 ， 也 不 
未 来 的 黑夜 。 
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图 10-11 气泡 对 话 框 效果 


咱 ) 10.3.2 图形 填充 边框 


在 CSS 样式 表 中 ， 虽 然 可 以 通过 border-style 属性 设置 边框 样式 ， 但 是 如 果 要 为 边框 设 
置 漂亮 的 背景 图 片 ，border-style 属性 并 不 能 实现 ， 那 么 应 该 怎么 做 呢 ? 很 简单 ，CSS 3 新 增 
加 的 border-image 属性 可 以 为 边框 添加 背景 图 片 。 
border-image 属性 的 基本 语法 如 下 : 


border-image:<' border-image-source '> || <' border-image-slice '> [/ <' border-image-width '> | / <' border- 


image-width '>? / <' border-image-outset '> ]? | | <' border-image-repeat '> 


从 上 述 语法 可 以 看 出 ，border-image 属性 的 取 值 包含 多 个 部 分 ， 下 面 分 别 进行 介绍 。 
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区 border-image-source 


border-image-source 设置 或 检索 对 象 的 边框 是 否 用 图 像 定义 样式 或 图 像 来 源 路 径 。 简 单 
来 说 ，border-image-source 用 于 引入 图 片 ， 语 法 如 下 : 


border-image-source:url(image url); /*image url 可 以 是 相对 地 址 也 可 以 是 绝对 地 址 */ 


其 中 ，url 调用 背景 图 片 ， 图 片 的 路 径 可 以 是 相对 地 址 也 可 以 是 绝对 地 址 。 如 果 不 想 使 用 
背景 图 片 可 以 将 值 设 置 为 none， 即 border-image:none， 其 默认 值 就 是 none。 


区 border-image-slice 
border-image-slice 设置 或 检索 对 象 的 边框 背景 图 的 分 割 方式 ， 语 法 如 下 : 


border-image-slice: [ <number> | <percentage>]{1,4}&& fill? 


border-image-slice 用 来 分 解 引 入 的 背景 图 片 ， 这 个 参数 相对 来 说 比较 复杂 和 特别 。 其 中 ， 
参数 number 表示 边框 宽度 ， 没 有 单位 ， = percentage 用 百分比 设置 表 框 的 宽度 ， 相 
对 于 背景 图 的 大 小 ， 可 以 取 1~4 个 值 ， 遵 循 trb-l 的 规则 ， fl 默认 为 空 ， 如 果 存 在 ， 则 图 片 
裁剪 完 后 ， 中 间 剩 余 的 部 分 将 会 保留 下 来 。 

另外 , 裁剪 完成 后 ,背景 图 就 成 为 9 个 部 分 , 4 个 角 、4 个 边 和 一 个 中 心 , 俗称 “九宫 格 ”。 
下 面 根据 图 10-12， 帮 助 大 家 理解 与 裁剪 部 分 相关 的 内 容 。 

在 图 10-12 中 ， 按 照 上 右 下 左 的 顺序 ， 依 次 把 背景 图 切 4 刀 ， 形 成 了 一 个 九宫 格 ， 而 这 
里 的 border-image-slice 取 值 为 124。 

裁剪 完 后 背景 图 被 分 为 9 个 部 分 ， 如 图 10-13 所 示 。 其 中 ，4 个 角 (1、2、3、4) 在 应 

用 时 会 分 布 在 应 用 元 素 的 4 个 角 上 ， 角 是 豆 古 不 变 的 ， 不 会 有 拉 伸 、 平 铺 或 重复 的 效果 。 有 

变化 的 就 是 其 他 4 个 〈 除 了 中 间 9) 会 应 用 border-image-repeat 中 设 定 的 排列 方式 。 


border -image - slice: 124; 


O | left right 
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124px 砷 


左 部 区 域 中 间 区 域 
指定 fi 4 否则 为 空 


E | 
| 8 4 
124px 名 左 T 角 二 记 部 区 域 右 下 角 
图 10-12 ”裁剪 效果 图 10-13 裁 切 图 


区 border-image-width 


border-image-width 设置 或 检索 对 象 的 边框 厚度 ，border-image-outset 设置 或 检索 对 象 的 
边框 背景 图 的 扩展 ， 其 中 border-image-width 的 语法 如 下 : 


border-image-width: [ <length> | <percentage> | <number> | auto ]{1,4} 
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border-image-width 就 是 border-width， 用 来 设置 边框 的 宽度 ， 可 以 直接 用 border-width 来 
代替 border-image-width， 具 体 使 用 方法 不 再 详解 。 


Ee border-image-repeat 
border-image-repeat 设置 或 检索 对 象 的 边框 图 像 的 平 铺 方 式 。 基 本 语法 如 下 : 


border-image-repeat: [ stretch | repeat | round ]{1,2} 


border-image-repeat 用 来 指定 border-image 的 排列 方式 , stretch 表示 拉 伸 , repeat 表示 重复 ， 
round 表示 拉 伸 平 铺 。 

border-image-repeat 属性 的 参数 设置 和 其 他 的 属性 不 一 样 ，border-image-repeat 不 遵循 
top、Tright、bottom、left 的 方位 原则 ， 只 接受 两 个 (或 一 个 ) 参数 值 ， 第 一 个 表示 水 平方 向 ， 
第 二 个 表示 垂直 方向 ， 当 取 值 为 一 个 值 时 ， 表 示 水 平和 垂直 方向 的 排列 方式 相同 。 同 时 其 默 
认 值 是 stretch， 如 果 省 略 参数 值 ， 那 么 水 平和 垂直 方向 都 以 stretch 排列 。 

【 例 10-14】 

下 面 示例 演示 了 border-image-repeat 属性 的 使 用 。 

创建 border-image.html 页 面 ， 在 页 面 中 添加 4 个 div 元 素 , 分 别 用 于 显示 原 图 、 拉 伸 效 果 、 
平 铺 效果 和 重复 效果 。 页 面 代码 如 下 : 


<div class="box1"></div> 
<div class="box2"></div> 
<div class="box3"></div> 
<div class="box4"></div> 


分 别 为 上 述 div 元 素 添加 样式 ， 指 定 边框 图 片 。 其 中 ， 第 一 个 div 元 素 显示 图 片 的 原型 ， 
图 片 总 长 度 为 81 像素 ， 每 个 图 片 长 度 为 27 像素 ; 第 二 个 div 元 素 以 stretch 拉 伸 显示 ， 第 三 
个 和 第 四 个 元 素 分 别 以 round 平 铺 和 repeat 重复 显示 。 部 分 代码 如 下 : 
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<style> 
div{width:250px;height:200px;float:left;border:15px solid;} 
.boxl{border:none; background-image:url(img/bg.jpg); width:81px; height:81px;} 
.box2{ 
border: 15px solid; 
-webkit-border-image: url("img/bg.jpg") 27 stretch; 
-moz-border-image: url("img/bg.jpg") 27 stretch; 
-0-border-image: url("img/bg.jpg") 27 stretch; 
border-image: url("img/bg.jpg") 27 stretch; 
</style> 


运行 border-image.html 网 页 ， 效 果 如 图 10-14 所 示 。 

仔细 观察 图 10-14 中 实现 的 平 铺 效果 ， 不 难 发 现 ，4 个 边 角 处 的 圆 形 都 有 被 截 掉 的 ， 这 
就 是 repeat 的 效果 。round 平 铺 和 repeat 重复 是 不 一 样 的 ，round 会 压缩 或 伸展 图 片 大 小 使 图 
片 正好 在 区 域内 显示 ， 而 repeat 是 不 管 任何 因素 直接 重复 的 。 
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@ | © filey///Dy/FirstTest/ten/border-image.html 
O00 


原 拉 伸 


-个 注意 -一 一 一 一 一 一 一 一 一 一 一 一 —— 


border-image 与 border-radius 属性 一 样 属 于 复合 属性 , 因此 如 果 不 想 直 接 设置 border-image 属性 ， | 
| 可 以 使 用 其 复合 属性 进行 设置 ， 如 border-top-image 和 border-bottom-image 等 。 1 


川 )》 10.3.3 ”边框 阴影 效果 


边框 阴影 是 网 页 中 常见 的 一 种 特效 ，CSS3 新 增加 的 box-shadow 属性 可 以 轻松 实现 阴影 
效果 。box-shadow 属性 的 基本 语法 如 下 : 


box-shadow:x-shadow y-shadow blur spread color inset; 


box-shadow 属性 的 取 值 说 明 如 下 。 
e Xx-shadow ”设置 水 平 阴影 的 位 置 (XX 轴 ), 单位 可 以 是 px、em 或 百分比 等 , 可 以 使 用 负 值 。 
e y-shadow 设置 垂直 阴影 的 位 置 (Y 轴 ), 单位 可 以 是 px、em 或 百分比 等 , 可 以 使 用 负 值 。 
e@ blur 可 选 ， 设 置 阴影 模糊 半径 。 取 正 值 时 ， 阴 影 在 对 象 的 底部 ; 取 负 值 时 ， 阴 影 在 对 
象 的 顶部 。 取 值 为 0 时 表示 阴影 是 完全 实心 和 尖锐 的 ， 没 有 任何 模糊 。 
@ spread 可 选 , 扩展 半径 ， 设 置 阴影 的 尺寸 。 该 选项 的 取 值 可 以 是 正 负 值 ， 如 果 值 为 正 ， 
则 整个 阴影 都 延展 扩大 ， 值 为 负 值 时 则 缩小 。 
e color 可 选 ， 设 置 阴影 的 颜色 。 
e inset 可 选 , 如 果 不 设 值 , 其 默认 的 投影 方式 是 外 阴影 ; 如 果 设 置 为 inset, 则 表示 内 阴影 。 
【 例 10-15】 
使 用 box-shadow 属性 时 ，x-shadow 和 y-shadow 两 个 参数 的 取 值 是 必需 的 ， 而 且 都 允许 
使 用 负 值 。 
E@ 创建 HIML 网 页 ， 在 页 面 中 添加 4 个 div 元 素 ， 分别 实现 不 同 的 效果 。 
加 到 为 div 元 素 分 别 添加 样式 ， 前 两 个 div 元 素 演示 水 平 阴 影 效果 ， 后 两 个 div 元 素 演示 
垂直 阴影 效果 。 代 码 如 下 : 
div{ width:300px; height:200px; float:left; margin-left:60px; margin-top:20px; margin-right:20px; margin- 
bottom:30px; background-color:#F8BOFB} 
.x1{ box-shadow: 20px Opx 10px Opx rgba(0,0,0,0.5); /* 省 略 内 容 */} 


| 
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“x2{ box-shadow: -20px Opx 10px Opx rgba(0,0,0,0.5); /* 省 略 内 容 */} 
‘y1{ box-shadow: Opx 20px 10px Opx rgba(0,0,0,0.5); 放 省略 内 容 */} 
‘y2{ box-shadow: Opx -20px 10px Opx rgba(0,0,0,0.5); 位 省 略 内 容 */} 


区 王 运行 HIML 页 面 , 效果 如 图 10-15 所 示 。 从 图 中 可 以 看 出 , 如 果 设 置 水 平 阴影 为 负 值 ， 
那么 阴影 会 出 现在 元 素 左 边 ; 同样 ， 如 果 设 置 垂直 阴影 为 负 值 ， 那 么 阴影 会 出 现在 元 素 上 方 。 


图 10-15 水 平和 垂直 阴影 效果 


四 妈 继续 在 页 面 中 添加 两 个 div 元 素 ， 分 别 演示 模糊 半径 ， 将 模糊 半径 指定 为 50 像素 ; 
设置 阴影 尺寸 时 ， 在 模糊 半径 的 基础 上 ， 设 置 阴 影 尺 寸 为 20 像素 。 样 式 代码 如 下 : 


1d112SeAer+ESS9+91W14H 改 ) 


.blur{ box-shadow: Opx Opx 50px Opx rgba(0,0,0,0.5); 作 省 略 内 容 * 作 
‘spread{box-shadow: Opx Opx 50px 20px rgba(0,0,0,0.5); 省 上 略 内 容 */} 


@ 旺 刷新 box-shadow.html 网 页 ， 效 果 如 图 10-16 所 示 。 


eo [@ mey//DyFirstTest/ten/box-shadow htm 


图 10-16 模糊 半径 和 阴影 尺寸 效果 
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【 例 10-16]】 
box-shadow 属性 的 功能 非常 强大 ， 通 常情 况 下 ， 该 属性 经 常 和 其 他 属性 结合 使 用 。 当 然 ， 
该 属性 可 以 像 border-radius 等 属性 那样 ， 设 置 多 个 值 实现 多 重 阴影 效果 。 代 码 如 下 : 


box-shadow:-10px Opx 10px red, /* 左边 阴影 */ 
Opx -10px 10px orange, /* 上 边 阴影 */ 
10px Opx 10px green, /* 右边 阴影 */ 
Opx 10px 10px blue;” /* 下 边 阴影 */ 


运行 HTML 网 页 ， 效 果 如 图 10-17 所 示 。 


© | © file///Di/FirstTest/ten/box=shadows.html 


最 初 的 原始 ， 最 初 的 真实 ， 才 是 最 美的 现在 ， 而 不 是 古老 的 过 去 ， 


庶 幻 的 未 来 ; 最 初 的 原始 ， 最 初 的 真实 ， 才 在 最 美的 白天 ， 而 不 在 古老 
的 梦 中 ， 虚 幻 的 黑夜 。 

最 初 的 美 ， 在 于 现在 的 白天 ; 最 初 的 美 ， 它 不 在 过 去 的 梦 中 ， 也 不 
胜 未 来 的 黑夜 。 


图 10-17 多 重 阴影 (外 阴影 ) 
更 改 上 述 示例 代码 ， 设 置 阴影 的 投影 效果 为 内 阴影 ， 此 时 效果 如 图 10-18 所 示 。 
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CO fileV/DYFirstTestten/box=shadows.html 


最 初 的 原始 ， 最 初 的 真实 ， 才 是 最 美的 现在 ， 而 不 是 古老 的 过 去 ， 


幻 的 未 来 ; 最 初 的 原始 ， 最 初 的 真实 ， 才 在 最 美的 白天 ， 而 不 在 古老 | 
有 梦 中 ， 虚 幻 的 黑夜 。 


最 初 的 美 ， 在 于 现在 的 白天 ; 最 初 的 美 ， 它 不 在 过 去 的 梦 中 ,也 不 | 
的 黑夜 。 


图 10-18 多 重 阴影 (内 阴影 ) 


9 10.4 ”设置 背景 样式 


几乎 所 有 的 网 站 都 离 不 开 背 景 ， 网 站 如 果 没有 背景 ， 那 么 会 显得 单调 。 为 了 满足 更 多 的 
需求 ，CSS3 增加 了 新 的 背景 属性 ， 这 些 属性 为 背景 提供 了 更 强大 的 控制 。 下 面 分 别 介绍 新 增 
加 的 background-origin、background-clip、background-size 属性 。 
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1》10.4.1 background-size 属性 

在 CSS3 之前， 背景 图 片 的 大 小 是 由 图 片 的 实际 大 小 决定 的 。 而 CSS3 中 增加 的 
background-size 属性 可 以 直接 设置 背景 图 片 的 大 小 ， 这 使 得 用 户 可 以 在 不 同 的 环境 中 重复 使 
用 背景 图 片 。 其 基本 语法 如 下 : 


background-size:<bg-size> [, <bg-size> ]* 
<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain 


上 述 语法 的 取 值 说 明 如 下 。 
e@ <length> 用 长 度 值 指定 背景 图 像 的 大 小 。 不 允许 为 负 值 。 
<percentage> 用 百分比 指定 背景 图 像 的 大 小 。 不 允许 为 负 值 。 
auto ”背景 图 像 的 真实 大 小 。 
cover ”将 背景 图 像 等 比 缩放 到 完全 覆盖 容器 ， 背 景 图 像 有 可 能 超出 容器 。 
contain ”将 背景 图 像 等 比 缩放 到 宽度 或 高 度 与 容器 的 宽度 或 高 度 相等 ， 背 景 图 像 始 终 包 
含 在 容器 内 。 
background-size 提 供 了 两 个 参数 值 ( 值 cover 和 contain 除 外 ), 第 一 个 定义 背景 图 像 的 宽度 ， 
第 二 个 定义 背景 图 像 的 高 度 。 如 果 只 提供 一 个 参数 值 ， 那 么 该 值 将 用 于 定义 背景 图 像 的 宽度 ， 


第 二 个 高 度 值 默 认为 auto， 此 时 背景 图 以 提供 的 宽度 作为 参照 来 进行 等 比 缩放 。 
【 例 10-17]】 


下 面 示例 演示 了 background-size 属性 的 应 用 。 

创建 size.html 网 页 ， 在 该 页 面 添加 两 个 div 元 素 。 第 一 个 div 元 素 的 背景 图 片 大 小 使 用 
默认 值 ( 即 图 片 的 实际 大 小 )， 而 第 二 个 div 元 素 使 用 background-size 属性 重新 定义 了 背景 
图 片 的 大 小 。 其 中 ，“background-size:160px 100px” 表 示 定 义 背景 图 片 宽度 为 160px、 高 度 
为 100px。 样 式 代码 如 下 : 
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div{ 
width:160px; height:100px; border:1px solid red; margin-bottom:10px; 
background-image:url("mg/bg.jpg"); background-repeat:no-repeat; 


} 
#div2{background-size:160px 100px;} 


【 例 10-18]】 
更 改 上 个 例子 中 的 代码 ， 页 面 中 包含 3 个 div 元 素 。 第 一 个 div 元 素 没 有 使 用 
background-size 属性 。 第 二 个 div 和 第 3 个 div 元 素 分 别 设置 为 cover 和 contain。 代 码 如 下 : 


div{ 
width:160px; height:100px; border:1px solid red; margin-bottom:10px; 
background-image:url("../App_images/lesson/run_CSS 3/CSS 3.png"); 
background-repeat:no-repeat; 
} 
#div2{background-size:cover;} 


#div3{background-size:contain;} 
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刷新 页 面 或 重新 运行 页 面 ， 效 果 如 图 10-19 所 示 。 


Sl 


区 口 backoround-sizeEt x 
@ | © fileVWDYFirstTestyten/size html 女 | D 


仔细 观察 图 10-19 可 以 发 现 ， 当 background-size 属性 取 值 为 关键 字 时 ，cover 和 contain 
都 可 以 产生 缩放 。 当 值 为 cover 时 ， 背 景 图 像 按 比例 缩放 ， 直 到 覆盖 整个 背景 区 域 为 止 ， 但 
可 能 会 裁剪 掉 部 分 图 像 。 当 值 为 contain 时 ， 背 景 图 像 会 完全 显示 出 来 ， 但 可 能 不 会 完全 获 盖 
背景 区 域 。 


站- 三 
0 
| 背景 图 片 不 同 于 img 引用 的 图 片 ， 对 于 img 引用 的 图 片 ， 可 以 使 用 width 和 height 属性 设置 ， 1 
但 这 两 个 属性 不 能 设置 背景 图 片 的 大 小 ， 因 此 引入 background-size 属性 设置 背景 图 片 的 大 小 。 背 | 
景 图 片 大 小 与 一 般 图 片 大 小 的 设置 有 着 本 质 区 别 。 | 


叫 ) 10.4.2 background-origin 属性 
在 CSS 3 中, background-origin 属性 用 来 设置 元 素 背景 图 片 平 铺 的 最 开始 位 置 。 语法 如 下 : 


background-origin:<box> [, <box> ]* 
<box> = border-box | padding-box | content-box 


其 中 ，padding-box 表示 从 padding 区 域 ( 含 padding) 开始 显示 背景 图 像 。border-box 表 
示 从 border 区 域 〈 含 border) 开始 显示 背景 图 像 。content-box 表示 从 content 区 域 开始 显示 背 
景 图 像 。 

【 例 10-19]】 

本 示例 演示 了 background-origin 属性 的 应 用 。 

创建 origin.html 网 页 ， 在 页 面 中 添加 div 元 素 和 其 他 元 素 ， 主 要 演示 background-origin 
属性 各 个 取 值 的 效果 。 相 关 样 式 代码 如 下 : 


.origin{border:15px solid lightblue;padding:50px; background:#FFF url(img/tx.jpg) no-repeat;} 
.Order1{ background-origin:border-box;} 

.order2{ background-origin:padding-box;} 

.order3{ background-origin:content-box;} 
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页 面 的 最 终 运 行 效果 如 图 10-20 所 示 ， 该 图 仅 显 示 部 分 截图 效果 。 


| Sl 
DD background-originBt x 到 
€ 3 GC |@ fle//D/FirstTest/en/origin.html 立 ] @ 
取信 border-box oar tc 
padding-box 
content-box 


为 两 岁 时 得 过 脑 炎 ， 短 力 受 损 ， 学 习 起 来 很 吃力 。 
三 百 字 , 他 却 只 能 号 三 五 行 ， 但 即使 这 样 的 作 


的 通气 量 塔 加 ， 胸 大 肌 、 胸 小 册 由 于 运动 得 到 镍 炼 和 增强 。 
消耗 过 多 的 脂肪 ， 利 用 全 身 各 部 位 的 抽 肉 ， 停 体型 匀称 健美 


图 10-20 ”background-origin 属性 的 使 用 


1 》10.4.3” ”background-clip 属性 
CSS3 中 新 增加 的 background-clip 属性 表示 将 背景 图 片 根据 实际 需要 进行 剪 切 。 语 法 如 下 : 


background-clip:<box> [, <box> ]* 
<box> = border-box | padding-box | content-box | text 
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其 中 ，padding-box 表示 从 padding 区 域 (不 含 padding) 开始 向 外 裁剪 背景 ，border-box 
表示 从 border 区域 (不 含 border) 开始 向 外 裁剪 背景 ，content-box 表示 从 content 区 域 开 始 向 
外 裁剪 背景 ，text 以 前 景 内 容 的 形状 〈 例 如 文字 ) 作为 裁剪 区 域 向 外 裁剪 ， 如 此 即 可 实现 使 
用 背景 作为 填充 色 之 类 的 遮 单 效果， 目前 该 属性 仅 webkit 内 核 的 浏览 器 支持 。 

【 例 10-20]】 

利用 background-clip 属性 实现 背景 作为 填充 色 的 遮 音 效果。 创建 clip.html 网 页 ， 在 页 面 

中 添加 div 元 素 ， 该 元 素 又 包含 一 个 p 元 素 。 为 页 面 中 的 div 元 素 和 Pp 元素 添加 以 下 样式 : 


<style> 
p{width:100px;height:100px;margin:0;padding:20px;border:10px dashed #666;background:#aaa url(limg/pic 
1.jpg) no-repeat;} 
.text p{ 
width:auto;height:auto;background-repeat:repeat; 
-webkit-background-clip:text; 
-webkit-text-fill-color:transparent; 
font-weight:bold;font-size:60px; 
由 
</style> 
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运行 clip.html 网 页 ， 效 果 如 图 10-21 所 示 。 


站 Css3 文字 填充 图 片 背景 x 
【© | © file:///D:/FirstTest/ten/clip.html 


PT a 


HELLO , Word . 


| Mp 


图 10-21 background-clip 属性 的 使 用 


9 7) 10.5 ”实践 案例 : 制作 太极 图 


本 章 介 绍 了 CSS3 中 新 增加 的 文本 属性 、 字 体 属 性 、 颜 色 属 性 、 边 框 属性 和 背景 属性 。 
通过 本 章 的 介绍 ， 相 信 大 家 对 于 这 些 属性 有 了 一 定 的 认识 。 本 节 实 践 案例 利用 前 面 的 知识 点 
完成 太极 图 的 制作 。 

静态 太极 图 的 制作 步骤 如 下 。 

园 友 创建 anlihtml 网 页 ， 在 页 面 中 添加 一 个 div 元 素 。 代 码 如 下 : 


<div class="box-taiji"></div> 


加 名 为 div 元 素 添 加 CSS 样式 , 使 用 border 实 现 左 黑 右 白 的 正方 形 , 并 加 上 圆 角 、 阴 影 效果 。 
代码 如 下 : 
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.box-taiji{ 
width:0;height:400px;position:relative;margin:50px auto;border-left:200px solid #000; 
border-rig ht:200px solid #fff;box-shadow:0 0 30px rgba(0,0,0,.5);border-radius:400px; 
} 


人 @ 吕 利用 E:after 伪 类 选择 器 实现 一 个 白色 的 圆 形 ， 并 设置 好 位 置 。 代 码 如 下 : 


.box-taiji:after { 
width:200px;height:200px;position:absolute;content:"";display:block;top:0;left:-100px; 
z-index:1;background-color:#fff;border-radius:50%; 

} 


四 妈 在 上 个 步骤 的 基础 上 添加 box-shadow 属性 ， 实 现 同样 大 小 的 圆 。 
国 晤 与 前 面 两 个 步骤 一 样 ， 需 要 再 实现 黑白 两 个 圆 ， 并 放 到 相关 位 置 。 新 的 CSS 样式 代 
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.box-taiji:before, 

.box-taiji:after {position:absolute;content:"";display:block;} 

.box-taiji:before { 
width:200px;height:200px;top:0;left:-100px;z-index:1;background-color:#fff; 
border-radius:50%;box-shadow:0 200px 0 #000; 

} 

.box-taiji:after { 
width:60px;height:60px;top:70px;left:-30px;z-index:2;background-color:#000; 
border-radius:50%;box-shadow:0 200px 0 #fff; 


} 
运行 网 页 查看 效果 ， 如 图 10-22 所 示 。 
pp [JSISL 
yD eS 太 权 图 x Ws 
© | © filey///D:/FirstTest/ten/anli.html Io 
图 10-22 ”太极 图 实现 效果 
ss 
1 旦 
)/) 10.6 练习 题 
一 、 填 空 题 
1. CSS3 中 新 增加 的 与 颜色 有 关 的 属性 是 。 
和 和 font-size-adjust 是 CSS3 中 新 增加 的 与 字体 有 关 的 属性 。 
3. 用 户 如 果 需 要 设置 某 个 边框 的 圆 角 效果 ， 需 要 用 到 属性 。 
4. 如 果 要 实现 边框 的 阴影 效果 ， 需 要 用 到 CSS3 新 增加 的 属性 。 
5. 用 户 想 要 实现 图 像 的 阴影 效果 ， 并 且 设 置 阴影 效果 为 内 阴影 ， 可 以 将 box-shadow 属 
性 的 值 设置 为  。 
6. background-origin 属性 的 取 值 可 以 是 border-box、padding-box 和 
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、 选 择 题 
CSS3 中 新 增加 的 text-shadow 属性 设置 
文本 的 文字 是 否 有 阴影 及 模糊 效果 


.指定 边框 是 否 有 阴影 样式 


当 内 容 超 过 指定 窗口 的 边界 时 是 否 断 行 
移动 端 页 面 中 文本 对 象 的 大 小 调整 
在 CSS3 中 ， 不 是 新 增加 的 背景 属性 。 


background-size 


background-origin 
background-image 


. background-clip 


当 background-size 属性 的 值 设置 为 时 ， 表 示 将 背景 图 像 等 比 缩放 到 完全 


图 像 有 可 能 超出 容器 。 


届 
Nu 
湖 


: COVer 
. Contain 


.以 上 都 可 以 


4. 针对 下 面 的 一 行 代码 可 得 知 ， 边 框 阴 影 的 模糊 半径 和 阴影 尺寸 分 别 是 。 


box-shadow:10px 10px 20px 30px blue inset; 


DOW "INmP 


. 10px,l0px 
. 10px,20px 


10px,20px 


. 20px,30px 

.在 下 面 选项 中 ， 不 是 复合 属性 。 
。border-radius 

. background-size 

. border-image 

. text-decoration 


XK 上 机 练习 1: 制作 需 虹 字 


距 为 0 时 ， 其 效果 如 同 创 
造 一 个 周围 会 发 光 的 字母 。 
如 果 单一 的 阴影 不 够 强烈 
可 以 重复 几 次 同样 的 阴影 。 
本 次 上 机 练习 利用 本 章 的 
知识 制作 需 虹 字 ， 效 果 如 
10-23 所 示 。 


如 果 把 一 个 模糊 阴影 “上 
放 在 区 字 的 正 后 方 ， 当 偏 © [© fie///Dy/FirstTest/ten/homeworkL.html 


图 10-23 过 虹 字 效 果 
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YX 上 机 练习 2: 设置 边框 样式 


本 章 详细 介绍 了 常用 的 边框 样式 ， 本 次 上 机 练习 要 求 读者 利用 本 章 介绍 的 内 容 设 置 边框 ， 
最 终 实现 的 效果 如 图 10-24 所 示 。 


LIEIGT 环 
多 n honorznmn x 
© | © fileV//DYFirstTest/ten/homework2 html | 女 | @ 


图 10-24 边框 样式 
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C553 在 原来 版 本 的 基础 上 新 增 了 许多 属性 ， 例 如 将 指定 的 图 片 放 大 或 缩小 、 设 置 图 片 过 
渡 的 时 间 和 方式 等 ， 通 过 这 些 属 性 可 以 实现 以 前 需要 大 段 JavaScript 脚本 才能 实现 的 功能 。 
本 章 详细 介绍 新 增 的 渐变 、 变形 、 过 渡 和 动画 属性 。 变形 功能 可 以 对 元 素 执行 位 移 、 旋转 、 缩放、 
倾斜 等 变换 ， 这 样 的 变换 可 以 更 加 容易 控制 HTML 的 页 面 元 素 呈 现 出 更 加 丰富 的 外 观 。 

在 过 渡 和 动画 方面 ，CSS3 提供 了 transition 动画 ，transition 动画 比较 简单 ， 只 要 执 
行 HTML 元 素 的 有 关 属 性 即 可 。 比 transition 动画 更 强大 的 是 animation 动画 ，animation 
动画 除了 可 以 与 位 移 、 旋 转 、 缩 放 、 倾 斜 结合 外 ， 还 可 以 指定 多 个 关键 帧 ， 从 而 允许 定义 功 
能 更 加 丰富 的 动画 。 


全 | 本 章 学 习 要 点 
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7 11.1 CSS3 的 变形 属性 


CSS3 提供 的 变形 属性 可 以 对 HTML 网 页 的 元 素 进行 常见 的 几何 变换 ， 包 含 旋转 、 缩 放 、 
倾斜 、 位 移 等 ， 也 可 以 使 用 变换 和 矩阵 进行 变形 。CSS3 新 增加 的 变形 属性 说 明 如 表 11-1 所 示 。 
其 中 transform 属性 经 常 被 用 到 。 

表 11-1 常见 的 变形 属性 及 其 说 明 


说 明 


检索 或 设置 对 象 的 变换 
检索 或 设置 对 象 中 的 变换 所 参照 的 原点 
指定 某 个 元 素 的 子 元 素 是 否 位 于 三 维 空间 内 
指定 观察 者 与 [z=0] 平面 的 距离 
指定 透视 点 的 位 置 

指定 元 素 背 面 面 向 用 户 时 是 否 可 见 


transform 


transform-origin 


transform-style 


perspective 


perspective-origin 


backface-visibility 


叫 ) 11.1.1 基本 变形 之 平移 

通过 为 transform 指定 不 同 的 变形 方法 ， 可 以 在 页 面 上 实现 对 HTML 元 素 的 变形 。 例 如 
常见 的 4 种 变形 ， 即 平移 、 缩 放 、 旋 转 、 倾 斜 等 。 平 移 功 能 可 以 使 页 面 元 素 向 上 、 下 、 左 或 
者 右 移动 多 个 像素 ， 该 功能 类 似 于 将 position 属性 设置 为 relative 时 的 效果 。 

在 CSS3 中 ， 可 以 使 用 translate() 方法 将 元 素 沿 着 水 平方 向 (X 轴 ) 和 垂直 方向 (Y 轴 ) 
移动 。translate() 方法 可 以 分 为 三 种 情况 。 

e@ translateX(x) 元 素 仅 在 水 平方 向 移动 ( 义 轴 移 动 ) 。 

®@ translateY(y) 元 素 仅 在 垂直 方向 移动 (Y 轴 移动 ) 。 

e@ translate(x.y) 元 素 在 水 平方 向 和 垂直 方向 同时 移动 (X 轴 和 轴 同 时 移动 ) 。 

以 translate(x,y) 为 例 ， 语 法 如 下 : 
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transform:translate(x, y); 


其 中 ， 参 数 x 表示 元 素 在 水 平方 向 (X 轴 ) 的 移动 距离 ， 单 位 为 px、em 或 百分比 等 。 
当 x 为 正 时 ， 表 示 元 素 在 水 平方 向 向 右 移动 (X 轴 正 方向 ); 当 x 为 负 时 ， 表 示 元 素 在 水 平 
方向 向 左 移动 (X 轴 负 方向 ) 。 

参数 y 表示 元 素 在 垂直 方向 (y 轴 ) 的 移动 距离 , 单位 为 px、em 或 百分比 等 。 当 y 为 正 时 ， 
表示 元 素 在 垂直 方向 向 下 移动 ; 当 y 为 负 时 , 表示 元 素 在 垂直 方向 向 上 移动 。 如果 省 上 略 y 人 参数， 
则 使 用 默认 值 0。 


-个 注意 -一 一 一 一 一 一 一 一 一 -一 一 一 一 


| 在 W3C 规定 中 ， 出 于 人 的 习惯 是 从 上 到 下 阅读 ， 因 此 所 选取 的 坐标 系 是 X 轴 正 方向 向 右 ， 而 | 
立轴 正方 向 向 下 。 有 些 读者 想到 的 坐标 系 ， 即 和 轴 正 方向 向 右 ，Y 轴 正 方向 向 上 是 “数学 形式 ” 
的 坐标 系 ， 只 适合 于 数学 应 用 。 | 
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【 例 11-1】 
创建 HTML 网 页 , 该 页 面 主 要 包含 div 元 素 , 演示 translate() 方 法 分 别 在 XX 轴 、Y 轴 的 效果 ， 
步骤 如 下 。 


大 和 DD 在 HTML 网 页 中 添加 div 元 素 ， 部 分 代码 如 下 : 


<div class="origin"> 
<div class="current-x">X 轴 平 移 </div> 
</div> 


< 上 - 省 略 其 他 代码 --> 
大 多 为 div 元 素 添加 样式 代码 ， 以 X 轴 平 移 的 效果 元 素 为 例 ， 有 关 CSS 代码 如 下 : 


<style type="text/css"> 
div{width:200px;height:150px; } 
.origin { float:left; border:2px dashed black;margin:50px;} 
人 * 设 置 当前 元 票 样式 */ 
.Current-x{ 
color:white; 
background-color: lightgreen; 
text-align:center; 
transform:translateX(20px); 
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-webkit-transform:translateX(20px); /* 兼容 -webkit- 引擎 浏览 器 */ 
-moz-transform:translateX(20px); /兼容 -moz- 引擎 浏览 器 */ 
-0-transform:translateX(20px); /* 兼容 -o- 引擎 浏览 器 */ 
} 
/* 省 略 其 他 样式 代码 */ 
</style> 
到 3 运 行 D cssatogeransate 0 x Nw 
HTML 页 面 时 的 © [© ey///DY/FirstTestanimationtest/translate ntml 
效果 如 图 11-1 所 
示 。 在 该 图 中 ， 
黑色 的 虚线 表示 
原始 效果 ， 有 颜 
色 的 区 域 表 示 平 
移 后 的 效果 。 
ee ee 
对 于 CSS3 中 新 增加 的 属性 ， 目 前 主流 浏览 器 并 未 支持 标准 的 transfrom 属性 ， 因 此 在 实际 开 
| 发 过 程 中 需要 添加 浏览 器 厂 商 的 前 级 ， 例 如 -moz-、-webkit- 以 及 -0- 等 前 缓 。 | 
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咱 ) 11.1.2 基本 变形 之 缩放 


缩放 是 指 “ 缩 小 ”和 “放大 ”在 CSS3 中 , 读者 可 以 使 用 scale( 方 法 根据 中 心 原点 缩放 元 素 。 
跟 translate() 方法 一 样 ， 缩 放 scale( 方法 也 有 三 种 情况 。 

@ scaleX(x) 元 素 仅 水 平方 向 缩放 (和 X 轴 缩放 ) 。 

e@ scaleY(y) 元 素 仅 垂直 方向 缩放 (立轴 缩放 ) 。 

e@ scale(x.y) 元 素 水 平方 向 和 垂直 方向 同时 缩放 (X 轴 和 习 轴 同时 缩放 ) 。 

以 scale(x, y) 方法 为 例 ， 语 法 如 下 : 


transform:scale(x, y); 


其 中 ，x 表示 元 素 沿 着 水 平方 向 (X 轴 ) 缩放 的 倍数 ， 如 果 大 于 1 就 代表 放大 ; 如 果 小 
于 1 就 代表 缩小 。y 表示 元 素 沿 着 垂直 方向 〈Y 轴 ) 缩放 的 倍数 ， 如 果 大 于 1 就 代表 放大 ; 
如 果 小 于 1 就 代表 缩小 。y 是 一 个 可 选 参数 ， 如 果 没 有 设置 该 值 ， 则 表示 X、Y 两 个 方向 的 
缩放 信 数 是 一 样 的 (同时 放大 相同 信 数 )。 

【 例 11-2] 

根据 例 11-1 的 效果 设计 HTML 网 页 ， 更 改 有 关 的 CSS 样式 代码 ， 将 子 元 素 分 别 沿 义 轴 
和 了 轴 放 大 到 1.5 倍 。 代 码 如 下 : 


.Current-x{ 
color:white; 
background-color: lightgreen; 
text-align:center; 
transform:scaleX(1.5); 
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-webkit-transform:scaleX(1.5); /* 兼容 -webkit- 引擎 浏览 器 */ 
-moz-transform:scaleX(1.5); /* 兼容 -moz- 引擎 浏 览 器 */ 
-0-transform:scaleX(1.5); /* 兼容 -o- 引擎 浏览 器 */ 
} 
运行 HIML_ ge 
网 页 . 放 夫 效 果 € © ©@ file///D:/FirstTest/animationtest/scale html 
如 图 11-2 所 示 。 
在 该 图 中 ， 黑 色 | | 
的 虚线 表示 原始 E ] 
效果 ， 有 颜色 的 
区 域 表 示 放 大 后 
的 效果 。 


图 11-2 ”放大 效果 


叫 )》 11.1.3 基本 变形 之 旋转 


在 CSS3 中 ， 读 者 可 以 使 用 rotate( 方法 相对 中 心 原点 旋转 元 素 。 这 里 的 旋转 是 二 维 的 ， 
不 涉及 三 维 空间 的 操作 。 
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rotate() 方法 的 语法 如 下 : 


transform: rotate (angel); 


如 上 述 语法 所 示 ， 
唯一 的 参数 angel 是 一 
个 数字 ， 表 示 要 旋转 的 


角度 ， 并 且 以 deg 


束 。 如 果 angel 为 正 数 ， 
则 进行 顺 时 针 旋 转 ， 否 
则 进行 逆 时 针 旋 转 ， 如 


图 11-3 所 示 。 


【 例 11-3] 


为 结 


ange 为 正 数 angel 为 负数 


图 11-3 旋转 示意 图 


继续 在 前 面 例子 的 基础 上 更 改 代码 ， 使 用 rotate0 方法 旋转 指定 的 div 元 素 ， 分 别 让 该 元 
素 按 顺 时 针 和 逆 时 针 旋转 ， 旋 转角 度 为 30 度 。 有 关 CSS 样式 代码 如 下 : 


.Current-x { 
color:white; 


background-color: lightgreen; 
text-align:center; 


transform:rotate(30deg); 


-webkit-transform:rotate(30deg); 
-moz-transform:rotate(30deg); 
-0-transform:rotate(30deg); 


-webkit-transform:rotate(-30deg); 
-moz-transform:rotate(-30deg); 
-0-transform:rotate(-30deg); 


/人 * 兼容 -webkit- 引擎 浏览 器 */ 
族 兼 容 -moz- 引擎 浏览 器 */ 
人 # 兼容 -o- 引擎 浏览 器 */ 


人 # 兼 容 -webkit- 引擎 浏览 器 */ 
人 # 兼 容 -moz- 引擎 浏览 器 */ 
人 # 兼 容 -o- 引擎 浏览 器 */ 


1 

.Current-y { 
color:white; 
background-color: lightblue; 
text-align:center; 
transform:rotate(-30deg); 

} 


咱 ) 11.1.4 ”基本 变形 之 倾斜 


使 用 transform 


属性 的 skew0 方法 可 以 沿 水 平和 垂直 方向 倾斜 文本 或 者 


法 与 translate( 方法 、scale( 方法 一 样 ， 也 有 三 种 情况 。 


图 像 。 


skew() 方 
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® ”skewX(x) 使 元 素 在 水 平方 向 倾斜 (和 X 轴 倾斜 ) 。 

e@ skewY(y) 使 元 素 在 垂直 方向 倾斜 (Y 轴 倾斜 ) 。 

e@ skew(x.y) 使 元 素 在 水 平方 向 和 垂直 方向 同时 倾斜 (和 轴 和 Y 轴 同 时 倾斜 ) 。 
以 skewCx.y) 方法 为 例 ， 代 码 如 下 : 


transform:skew(x,y); 


第 一 个 参数 对 应 X 轴 ，x 表示 元 素 相 对 于 XX 轴 倾 斜 的 度数 ， 单 位 为 deg。 如 果 度 数 为 正 ， 
表示 元 素 沿 水 平方 向 (X 轴 ) 顺 时 针 倾斜 ;如果 度数 为 负 ， 表 示 元 素 沿 水 平方 向 (X 轴 ) 道 
时 针 倾 斜 。 
第 二 个 参数 对 应 了 轴 。y 表示 元 素 相对 于 YY 轴 倾 斜 的 度数 ， 单 位 为 deg。 如 果 度 数 为 正 ， 
表示 元 素 沿 垂直 方向 (Y 轴 ) 顺 时 针 倾斜 ;1 如 果 度 数 为 负 ， 表 示 元 素 沿 垂直 方向 (Y 轴 ) 道 
时 针 倾 斜 。 如 果 第 二 个 参数 未 提供 ， 则 其 值 为 0， 也 就 是 Y 轴 方 向 上 无 倾斜 。 

【 例 11-4] 

本 示例 演示 skew() 方法 的 应 用 。 

创建 HTNML 网 页 ， 在 页 面 中 添加 div 元 素 演示 skewX0 方法 、skewY0 方法 和 skew() 
方法 的 使 用 。 以 skew0 方法 为 例 ， 有 关 样 式 代码 如 下 : 


.Current-xy{ 
color:white; 
background-color: orange; 
text-align:center; 
transform:skew(10deg,30deg); 


-webkit-transform:skew(10deg,30deg); /* 兼容 -webkit- 引擎 浏 览 器 */ 
-moz-transform:skew(10deg,30deg); /* 兼容 -moz- 引擎 浏览 器 */ 
-o-transform:skew(10deg,30deg); /* 兼容 -moz- 引擎 浏览 器 */ 
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运行 HTML 网 页 , 黑色 虚线 是 原始 效果 , 带 颜 色 的 区 域 表 示 倾 斜 后 的 效果 , 如 图 11-4 所 示 。 


D csssowsevsz x 
© | © fieyWDYFirstTesUanimatontesVskew html 


图 11-4 倾 针 效果 


a a 
学 过 数学 的 读者 都 应 该 知道 ,平移 、 旋 转 和 倾 针 都 不 会 改变 四 边 形 的 面积 skew0 方 法 比较 少 用 。 
| 该 方法 如 果 使 用 得 当 ， 会 使 网 页 美观 动感 ; 如 果 用 得 不 好 ， 那 么 将 是 网 站 的 一 大 败笔 。 j 
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叫 ) 11.1.5 “实践 案例 : 制作 个 性 图 片 墙 


虽然 transform 属性 提供 了 多 个 方法 ， 但 是 单纯 使 用 某 个 方法 对 元 素 进行 设置 (例如 平移 ) 
是 没有 多 大 实际 意义 的 。 一 般 情况 下 ，transform 属性 常常 会 和 animation 属性 以 及 transition 
属性 等 一 起 使 用 。 

细心 的 读者 可 以 发 现 ， 在 许多 个 人 网 站 上 ， 经 常会 出 现 有 个 性 的 图 片 墙 。 本 节 就 来 介绍 
如 何 利用 CSS3 实现 个 性 图 片 墙 效果 ， 如 图 11-5 所 示 。 


由 Cs53 实 现 个 性 图 上 十 。 x 
CG | © file///DyFirstTest/animationtest/transform-test.html 


1dloSeAer+SsSSIOI+S1WNLH 人 


图 11-5 个 性 图 片 墙 


根据 图 11-5 所 示 的 效果 进行 设计 ， 具 体 步骤 如 下 。 
园 卫 创建 HTML 网 页 ， 在 页 面 添加 div 元 素 ， 该 元 素 包含 8 张 图 片 。 代 码 如 下 : 


<div id="container"> 
<img src="images/p1.jpg"> 
<img src="images/p2.jpg"> 
<!-- other img code --> 
</div> 


轩 加 添加 元 素 设 计 代 码 。 首 先 为 div 元 素 和 img 元 素 添加 原始 样式 。 


#container { width:900px; height:650px; margin:100px auto; background-image:url("images/timg.jpg"); } 
img { margin:20px; padding:10px; background-color:White; } 
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区 设计 奇数 个 和 偶数 个 图 片 如 旋转 效果 。 


#container img:nth-child(2n) { left:80px; top:60px; -webkit-transform:rotate(30deg); } 
#container img:nth-child(2n+1) { left:80px; top:60px; -webkit-transform:rotate(-30deg); } 


大 难为 图 片 添加 鼠标 悬 停 时 的 效果 。 


#container img:hover{ 
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
transform:translate(Opx,25px) scale(1.5,1.5); 
-webkit-transform:translate(Opx,25px) scale(1.5,1.5); 
-moz-transform:translate(Opx,25px) scale(1.5,1.5); 
-0-transform:translate(Opx,25px) scale(1.5,1.5); 


} 


厢 晤 运行 HTML 网 页 进行 效果 测试 。 
在 本 节 实 践 案例 中 ， 主 要 通过 transform:rotate() 方法 实现 图 片 旋转 ， 用 translate() 方法 实 
图 片 的 平移 ， 然 后 使 用 box-shadow 属性 设置 鼠标 移 到 图 片上 时 的 阴影 效果 。 除 此 之 外 ， 还 


用 到 了 CSS3 中 的 结构 伪 类 选择 器 。 


另外 ，transform 属性 可 以 同时 应 用 多 个 变形 ， 即 为 该 属性 同时 指定 多 个 变形 方法 。 但 是 ， 


需要 注意 ，transform 属性 的 变形 处 理 方法 的 顺序 非常 重要 ， 即 使 是 同样 的 变形 ， 如 果 变 形 的 


顺序 不 同 ， 那 么 呈现 给 客户 的 效果 也 会 不 同 。 


叫 ) 11.1.6 “指定 变形 中 心 点 


任何 元 素 都 有 一 个 中 心 原点 ， 默 认 情 况 下 ， 元 素 的 中 心 原点 位 于 XX 轴 和 YY 轴 的 


50% 处 。 通 常情 况 下 ，CSS3 的 人 位移、 缩放、 旋转、 倾斜 都 是 以 元 素 的 中 心 原点 进行 


变形 。 


假设 要 让 元 素 进行 位 移 、 缩 放 、 旋 转 、 倾 斜 等 变形 操作 的 中 心 原点 不 是 原来 元 素 的 中 心 


位 置 ， 那 该 怎么 办 呢 ? 在 CSS3 中 ， 可 以 通过 transform-origin 属性 来 改变 元 素 变形 时 的 中 心 


原 


点 位 置 。 完 整 语法 如 下 : 


transform-origin: [ <percentage> | <length> | left | center ®) | right ] [ <percentage> | <length> | top | 


center ©@ | bottom ]? 


从 上 述 语 法 可 以 知道 ，transform-origin 属性 可 以 提供 两 个 参数 或 一 个 参数 。 如 果 提 供 两 


个 参数 ， 第 一 个 用 于 横 坐标 ， 第 二 个 用 于 纵 坐标 。 如 果 只 提供 一 个 ， 则 用 于 横 坐 标 ， 纵 坐标 


默认 为 50%。 


transform-origin 属性 的 取 值 有 两 种 : 一 种 是 采用 长 度 值 ， 另 一 种 是 使 用 关键 字 。 长 度 值 


一 般 用 百分比 表示 , 很 少 使 用 px、em 等 单位 。 不 管 transform-origin 取 值 为 长 度 值 还 是 关键 字 ， 
都 需要 设置 水 平方 向 和 垂直 方向 的 值 ， 该 属性 的 取 值 及 其 说 明 如 下 。 


@ <percentage> 用 百分比 指定 坐标 值 ， 可 以 为 负 值 。 
e@ <length> 用 长 度 值 指定 坐标 值 ， 可 以 为 负 值 。 

e@ left 指定 left 为 原点 的 横 坐标 。 

@ center 4) 指定 center 为 原点 的 横 坐 标 。 
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e right 指定 right 为 原点 的 横 坐 标 。 
e@ top 指定 top 为 原点 的 纵 坐 标 。 


@ center @ 指定 center 为 原点 的 纵 坐 标 。 
e@ bottom ”指定 bottom 为 原点 的 纵 坐 标 。 
【 例 11-5】 


本 示例 演示 transform-origin 属性 的 应 用 。 
在 HTML 网 页 中 添加 两 个 块 元 素 ， 每 个 块 元 素 包 含 一 个 div 子 元 素 。 代 码 如 下 : 


<div class="origin"><div class="current-x"> 顺 时 针 旋 转 (正中) </div></div> 
<div class="origin"><div class="current-y"> 顺 时 针 旋 转 〈 靠 右 居 中 ) </div></div> 


设计 div 元 素 的 样式 ， 省 略 元 素 的 初始 样式 ， 然 后 设计 div 元 素 的 旋转 样式 ， 设 计 完 毕 ， 
还 需要 为 文本 “ 顺 时 针 旋转 ( 靠 右 居中 ) ”的 div 元 素 重 新 指定 变形 中 心 点 。 主 要 代码 如 下 : 


.Current-y { 
color:white; 
background-color: lightblue; 
text-align:center; 
transform-origin:right center; 


-webkit-transform-origin:right center; /* 兼容 -webkit- 引擎 浏览 器 */ 
-moz-transform-origin:right center; /* 兼容 -moz- 引擎 浏览 器 */ 
-o-transform-origin:right center; /* 兼容 -moz- 引擎 浏览 器 */ 
妊 省 略 旋转 代码 */ 

} 

运行 网 页 ， 效 果 Sjlelel ¥ 


口 css3 中 心 原点 transforr x > 
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如 图 11-6 所 示 。 仔 
细 观 察 两 个 图 形 ， 虽 
然 都 是 让 元 素 顺 时 针 
旋转 30 度 ， 但 是 由 
于 为 第 二 个 图 形 指定 
了 中 心 原点 ， 由 “ 正 
中 ” 变 为 “ 靠 右 居 
中 ”, 因此 在 显示 时 ， 
元 素 以 “新 的 中 心 原 
点 ”作为 旋转 的 中 心 
原点 。 


CO fileV/DYFirstTesVanimationtestytransform-origin.html 女 | : 


图 11-6 指定 变形 中 心 原点 


et 

前 面 介 绍 的 translate0、scale0、rotate0、skew0 方法 其 实 都 可 以 通过 matrix() 方法 来 实现 ， 只 1 
we 如 果 使 用 前 面 的 4 个 方法 可 以 完成 变形 ， 就 没有 必要 使 用 | 
matrix() 方法 进行 变形 。 因 此 ， 这 里 不 再 对 matrix( 方法 进行 介绍 。 | 


全 
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97) 11.2 CSS3 的 过 渡 属 性 


transform 变形 、transition 过 渡 和 animation 动画 是 CSS3 动画 的 三 部 分 ， 上 一 节 简 单 接触 
了 CSS3 变形 ， 这 一 节 介绍 CSS3 的 过 渡 效 果 。 


叫 ) 11.2.1 过 渡 属 性 概述 


在 CSS3 中 ， 可 以 使 用 transition 属性 将 元 素 的 某 一 个 属性 从 “一 个 属性 值 ”在 指定 的 时 
间 内 平滑 地 过 渡 到 “另外 一 个 属性 值 ” 来 实现 动画 效果 。 

前 面 介绍 的 transform 属性 所 实现 的 元 素 变形 ， 呈 现 的 仅仅 是 一 个 “结果 ”， 而 transition 
属性 呈现 的 是 一 种 过 渡 “ 过 程 ”， 通 俗 地 说 就 是 一 种 动画 的 转换 过 程 ， 例 如 渐 显 、 渐 隐 、 动 
画 快慢 等 。 

transition 属性 是 一 个 复合 属性 ， 语 法 如 下 : 


transition: transition-property transition-duration transition-timing-function transition-delay; 


从 上 述 语 法 可 以 看 出 ，transition 属性 包含 transition-property、transition-duration、 
transition-timing-function 和 transition-delay 属性 。 
transition-property 属性 
transition-property 用 于 检索 或 设置 对 象 中 参与 过 渡 的 属性 。 该 属性 用 于 指定 要 进行 过 渡 
的 CSS 属性 ， 例 如 background-color、border-color、color、font-size、opacity 等 。 除 了 具体 的 
CSS 属性 外 ， 将 该 属性 的 值 设 置 为 none 时 ， 表 示 不 指定 过 渡 的 CSS 属性 ， 取 值 为 al 时 ， 表 
示 所 有 可 以 进行 过 渡 的 CSS 属性 ，all 为 默认 取 值 。 
transition-duration 属性 
transition-duration 属性 指定 对 象 过 渡 的 持续 时 间 。 如 果 要 为 该 属性 提供 多 个 属性 值 ， 
要 以 逗号 进行 分 隔 。 
BY transition-timing-function 属性 
transition-timing-function 属性 是 整个 过 渡 动 画 的 类 型 ， 用 于 指定 使 用 什么 样 的 方式 进行 
过 渡 。transition-timing-function 属性 的 语法 格式 如 下 : 


Ea 
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transition-timing-function:effectname; 


这 里 的 effectname 表示 过 渡 效 果 的 名 称 ， 默 认 值 是 ease， 即 以 溶解 方式 显示 过 渡 。 
effectname 还 有 很 多 值 ， 常 见 取 值 及 其 说 明 如 下 。 
@ ease 默认 值 ， 平 滑 过 渡 。 等 同 于 贝 塞 尔 曲 线 (0.25, 0.1, 0.25, 1.0)。 
linear 线性 过 渡 。 等 同 于 贝 塞 尔 曲线 (0.0, 0.0. 1.0, 1.0)。 
ease-in ” 淡 入 效果 ， 由 慢 到 快 。 等 同 于 贝 塞 尔 曲线 (0.42. 0, 1.0, 1.0)。 
ease-out 淡出 效果 ， 由 快 到 慢 。 等 同 于 贝 塞 尔 曲 线 (0. 0. 0.58, 1.0)。 
ease-in-out ” 淡 入 淡出 效果 ， 由 慢 到 快 再 到 慢 。 等 同 于 贝 塞 尔 曲线 (0.42. 0. 0.58, 1.0)。 
e@ cubic-bezier 自 定 义 特殊 的 立方 贝 塞 尔 曲 线 效 果 ，4 个 数值 需 位 于 [0, 1] 区 间 。 
a transition-delay 属性 
过 渡 动 画 效果 的 最 后 一 个 属性 transition-delay 用 于 定义 动画 开始 之 前 的 延迟 时 间 。 
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transition-delay 属性 的 语法 格式 如 下 : 
transition-delay:time; 


这 里 的 time 与 transition-duration 属性 中 的 time 具有 相同 的 值 ， 可 以 设置 为 s ( 秒 ) 或 者 
ms《〈 毫 秒 ) 。time 的 默认 值 为 0， 即 表示 没有 延迟 。 


二 
- 仆 注 意 - -------------- 
| 如 果 time 为 负数 , 过 洲 效 果 将 会 被 截断 。 例 如 , 一 个 过 渡 为 5 秒 的 动画 , 当 time 为 一 1 秒 的 时 候 ， | 
| 过 渡 效 果 将 直接 从 1/5 处 开始 ， 持 续 4 秒 。 j 


叫 )》 11.2.2 单个 属性 实现 过 渡 

在 使 用 tansition 属性 时 ， 可 以 为 该 属性 依次 指定 多 个 属性 值 ， 或 者 分 别 指定 其 复合 属性 。 

【 例 11-6] 

在 网 页 中 添加 一 个 div 元 素 ， 指 定 该 元 素 的 长 度 、 宽 度 、 背 景 颜色 、 圆 角 等 属性 ， 当 忌 
标 悬 浮 在 该 矩形 上 时 ， 更 改 矩 形 的 圆 角 值 ， 实 现 从 矩形 到 圆 形 的 过 渡 ， 过 渡 前 的 延迟 时 间 为 
0 秒 ， 过 渡 时 间 为 0.5 秒 ， 过 渡 类 型 为 linear。 样 式 代码 如 下 : 


<style type="text/css"> 
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div{ 
display:inline-block;width:100px;height:100px;border-radius:0;background-color:#14C7F3; 
transition-property:border-radius; /* 指定 过 渡 属 性 */ 
transition-duration:0.5s; /* 指定 过 渡 时 间 */ 
transition-timing-function:linear; A* 指定 过 渡 类 型 */ 
transition-delay:0s; /* 指定 过 渡 延 迟 时 间 */ 
} 
div:hover { border-radius:50px; } 
</style> 


上 述 有 关 过 渡 代 码 等 价 于 以 下 代码 : 


transition:border-radius 0.5s linear 0s; 


川 ) 11.2.3 ”多 个 属性 同时 过 渡 
可 以 使 用 transition 属性 同时 指定 多 组 property、duration、timing-function、delay 值 ， 每 
组 property、duration、timing-function、delay 值 控制 一 个 属性 值 的 过 渡 效 果 。 
通过 多 个 属性 同时 渐变 可 以 非常 方便 地 开发 出 动画 效果 。 假 设想 要 实现 一 个 在 页 面 上 随 
着 鼠标 漂移 的 气球 ， 即 控制 气球 移动 主要 是 修改 气球 图 片 的 left、top 两 个 属性 值 ， 让 这 两 个 
属性 值 等 于 鼠标 按 下 的 X、Y 坐标 即 可 。 如 果 再 设置 气球 图 片 的 left、top 属性 不 是 突然 改变 ， 
而 是 以 平滑 渐变 的 方式 改变 ， 这 就 是 动画 。 
【 例 11-7] 
站 定 transition 属性 的 值 实现 多 个 属性 同时 过 渡 的 效果 ， 当 用 户 在 页 面 中 移动 鼠标 并 单 击 
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时 ， 气 球 会 随 着 鼠标 的 位 置 而 移动 ， 操 作 步 又 如 下 。 
大 三 在 创建 的 HTML 网 页 中 添加 一 张 图 片 。 


<img id="target" src="images/balloon.gif" alt=" 气球 " /> 


加 允 设置 图 片 的 过 渡 特 效 , 指定 气球 图 片 的 left\top 两 个 属性 以 平滑 渐变 的 方式 发 生 改变 ， 
这 样 每 次 按 下 鼠标 时 ， 即 可 看 到 气球 慢 慢 地 漂浮 过 来 的 效果 。 代 码 如 下 : 


<style type="text/css"> 
img#target{ 
position:absolute; 
transition:left 5s linear,top 5s linear; 
-webkit-transition:left 5s linear,top 5s linear; 
-moz-transition:left 5s linear,top 5s linear; 
-o-transition:left 5s linear,top 5s linear; 
} 
</style> 


大 号 继续 添加 JavaScript 脚本 代码 ， 获 取 网 页 中 的 img 元 素 ， 动 态 设置 left 和 top 属性 的 
值 。 内 容 如 下 : 
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<script> 
Var target = document.getElementByld("target"); 
target.style.left="Opx"; 
target.style.top="Opx"; 
document.onmousedown=function(evt){ 
target.style.left=evt.pageX+"px"; 
target.style.top=evt.pageY+"px"; 
} 
</script> 
大 一 运行 网 页 的 初始 效果 如 图 11-7 所 示 ， 单 击 页 面 的 空白 区 域 ， 此 时 过 渡 效 果 如 图 11-8 


所 示 。 


SJIsIST 2 
x Doms x 


襄 幸 个 压 性 同村 过 息 
© | © Mey///DyFirstTes' 


Jontest/transition-2.htm TesVanimationtestytransltl 


图 11-7 初始 效果 图 11-8 过 渡 效 果 
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在 本 例 中 ， 我 们 为 transition 属性 指定 了 多 组 属性 值 ， 除 了 使 用 上 述 有 关 的 代码 外 ， 还 可 
以 使 用 下 面 的 代码 ， 它 们 的 效果 是 一 样 的 。 


transition-property: left, top; 
transition-duration: 5s, 5s; 


transition-timing-function: linear, linear; 


如 果 定义 了 多 个 过 渡 属 性 ， 而 其 他 属性 只 有 一 个 参数 值 ， 则 表明 所 有 需要 过 渡 的 属性 都 
应 用 同一 个 参数 值 。 因 此 ， 还 可 以 针对 上 述 代 码 进行 缩写 。 


transition-property: left, top; 
transition-duration: 5s; 
transition-timing-function: linear; 
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除了 可 以 以 平滑 渐变 的 方式 改变 位 置 外 ， 还 可 以 修改 HTML 的 宽度 、 高 度 、 背 景 颜色 等 , 感 | 
| 兴趣 的 读者 可 以 亲自 动手 试 一 试 。 | 


咱 ) 11.2.4 ”实践 案例 ， 鼠标 悬浮 特效 的 过 渡 功 能 

当 用 户 的 鼠标 移 到 图 片上 ， 从 底部 向 上 滚动 出 半 透 明 遮 章 显 示 文 字 的 效果 ， 鼠 标 移 走 后 
遮 单 层 消失 。 这 种 特效 在 很 多 网 站 上 都 能 看 到 ， 本 小 节 通 过 一 个 案例 演示 该 特效 的 功能 。 

在 实现 该 特效 时 ， 主 要 使 用 transform 的 translateY 值 来 设置 鼠标 经 过 图 片上 方 时 ， 出 现 
文字 解释 效果 ， 使 用 transition 属性 设置 过 渡 特 效 。 图 11-9 为 最 终 的 实现 效果 。 


LEIGI ER 


口 产品 列表 之 息 标 al 生效 x 同和 


可 CO file///Dy/FirstTest/animationtest/transition-test.html 女 | : 


贯 读 厂 《Poodle) ， 也 称 " 贵 妇 犬 "， 又 
称 " 旁 毛 移 ”， 是 犬 亚 科 犬 属 的 一 种 动 


查看 全 文 B 


图 11-9 息 标 悬浮 特效 


根据 效果 设计 网 页 ， 主 要 步骤 如 下 。 
加 入 在 HIML 网 页 中 添加 多 个 div 元 素 ， 以 第 一 个 图 片 的 内 容 为 例 ， 代 码 如 下 : 
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<div class="view view-tenth"> 

<figure> 

<div class="thumb"><img src="images/hsq.jpg" /></div> 

<div class="mask"> 

<h2> 哈士奇 </h2> 

<p> 西伯 利 亚 雪 概 犬 (俄语 Ca6npcKrkIExXxackH， 英 语 : Siberian husky), 常见 别名 哈士奇 ， 
俗名 为 二 哈 。.…</p> 

<a href="#" class="link"> 查看 全 文 </a></div> 


</figure> 


</div> 


丰台 为 网 页 中 的 元 素 添加 样式 ， 部 分 样式 代码 如 下 : 


.main *{ padding:0; margin:0; font-family:'Source Code Pro', Menlo, Consolas, Monaco, monospace; box- 
sizing: border-box; -webkit-box-sizing: border-box; } 
.main { position: relative; width: 680px; margin: 0 auto; } 
view { 
width: 300px; margin: 10px; float: left; border: 10px solid #fff; cursor: default; 
-webkit-box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6; 
-moz-box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6; 
-0-box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6; 
box-shadow: 1px 1px 2px #e6e6e6,-1px -1px 2px #e6e6e6; 
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6B 为 网 页 中 的 img 元 素 添加 样式 代码 ， 设 置 图 片 的 过 渡 属 性 和 过 渡 时 间 等 内 容 。 相 关 
代码 如 下 : 


1d 


.view-tenth figure img { 
-webkit-transition: -webkit-transform 0.4s; 
-moz-transition: -moz-transform 0.4s; 
-o-transition: -moz-transform 0.4s; 
transition: transform 0.4s; 

} 

view-tenth figure:hover img{ 
-webkit-transform: translateY(-50px); 
-moz-transform: translateY(-50px); 
-o-transform: translateY(-50px); 
transform: translateY(-50px); 

} 

-View-tenth .mask { 
‘opacity: 0; 
-webkit-transform: translateY(100%); 
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-moz-transform: translateY(100%); 


-o-transform: translateY(100%); 
transform: translateY(100%); 
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s; 
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s; 
-o-transition: -moz-transform 0.4s, opacity 0.1s 0.3s; 
transition: transform 0.4s, opacity 0.1s 0.3s; 

} 

.View-tenth figure:hover .mask { 
‘opacity: 1; 
-webkit-transform: translateY(Opx); 
-moz-transform: translateY(Opx); 
-0-transform: translateY(Opx); 
transform: translateY(Opx); 
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s; 
-moz-transition: -moz-transform 0.4s, opacity 0.1s; 
-o-transition: -moz-transform 0.4s, opacity 0.1s; 
transition: transform 0.4s, opacity 0.1s; 


} 


加 鸡 运行 网 页 进行 效果 测试 。 
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7)) 11.3 CSS3 的 动画 属性 


CSS3 动画 由 三 大 部 分 组 成 : 变形 、 过 渡 和 动画 。 前 面 两 节 已 经 对 变形 效果 和 过 渡 效 果 
进行 了 讲解 ， 本 节 讲 解 CSS3 中 “真正 ”的 动画 效果 。 


叫 )》 11.3.1 了 解 animation 属性 


在 CSS3 中 ， 动 画 效果 使 用 animation 属性 来 实现 。animation 属性 和 transition 属性 都 是 
通过 改变 元 素 的 “属性 值 ”来 实现 动画 效果 。 但 这 两 者 有 很 大 的 区 别 ，transition 属性 只 能 
过 指定 属性 的 开始 值 与 结束 值 ， 然 后 在 这 两 个 属性 值 之 间 进 行 平滑 过 渡 来 实现 动画 效果 ， 因 
此 只 能 实现 简单 的 动画 效果 。animation 属性 则 可 以 通过 定义 多 个 关键 帧 以 及 定义 每 个 关键 由 
中 元 素 的 属性 值 来 实现 复杂 的 动画 效果 。 

animation 属性 的 语法 如 下 : 


1d 


animation: animation-name animation-duration animation-timing-function animation-delay animation- 


iteration-count animation-direction animation-fill-mode; 


从 上 述 语法 可 以 看 到 ，animation 是 一 个 复合 属性 ， 包 含 的 子 属 性 有 animation-name、 
animation-duration、animation-timing-function、animation-delay、animation-iteration-count、 
animation-direction 和 animation-fill-mode。 
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三 animation-name 属性 
animation-name 属性 用 于 定义 要 应 用 的 动画 名 称 。animation-name 属性 的 语法 格式 如 下 : 


animation-name:animationName; 


这 里 的 animationName 参数 是 用 @keyframes 属性 指定 的 名 称 ， 其 值 必须 与 @keyframes 
指定 的 值 一 致 ( 区 分 大 小 写 ) ， 如 果 不 一 致 将 不 具有 任何 动画 效果 。 如 果 值 为 none， 则 表示 
不 应 用 任何 动画 效果 ， 通 常用 于 覆盖 或 者 取消 动画 。 

区 animation-duration 属性 

animation-duration 属性 用 于 定义 整个 动画 效果 完成 所 需要 的 时 间 。animation-duration 属 
性 的 语法 格式 如 下 : 

animation-duration:times; 

times 参数 是 以 秒 〈s) 或 者 毫秒 (ms) 为 单位 的 时 间 ， 默 认 值 为 0， 表示 没有 动画 。 

WB animation-timing-function 属性 


animation-timing-function 属性 用 于 定义 使 用 哪 种 方式 执行 动画 效果 。animation-timing- 
function 属性 的 语法 格式 如 下 : 


animation-timing-function: effectname; 
effectname 参数 的 含义 与 transition-timing-function 属性 相同 ， 可 以 为 ease (默认 值 )、 


linear、ease-in、ease-out、ease-in-out 和 cubic-bezier。 


区 animation-delay 属性 
animation-delay 属性 用 于 定义 在 执行 动画 效果 之 前 延迟 的 时 间 。animation-delay 属性 的 语 
法 格式 如 下 : 


animation-delay:times; 
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这 里 的 times 与 animation-duration 属性 中 的 times 具有 相同 的 值 ， 可 以 设置 为 s ( 秒 ) 或 
者 ms《〈 毫 秒 )。times 的 默认 值 为 0， 表示 没有 延迟 。 
YY animation-iteration-count 属性 
animation-iteration-count 属性 用 于 定义 当前 动画 效果 重复 播放 的 次 数 。animation-iteration- 
count 属性 的 语法 格式 如 下 : 
animation-iteration-count:number; 


number 参数 是 一 个 整数 ， 默 认 值 为 1， 表示 动画 从 开始 到 结束 播放 一 次 。 如 果 该 参数 为 
infinite， 则 表示 动画 无 限 次 地 重复 播放 。 


I animation-direction 属性 
animation-direction 属性 用 于 定义 当前 动画 效果 播放 的 方向 。animation-direction 属性 的 语 
法 格式 如 下 : 
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animation-direction:direction; 


direction 参数 的 取 值 及 其 说 明 如 下 。 

ee normal 默认 值 ， 表 示 每 次 动画 都 从 头 开始 执行 到 最 后 。 

@ reverse 反方 向 播放 动画 。 

e alternate ”表示 动画 播放 到 最 后 时 将 反 向 播放 ， 即 从 最 后 状态 逆向 播放 到 开始 状态 。 
e@ alternate-reverse 动画 先 反方 向 运行 再 正方 向 播放 ， 并 且 持 续 交 蔡 运 行 。 


BW animation-fil-mode 属性 
animation-fill-mode 属性 用 于 定义 动画 开始 之 前 或 者 播放 之 后 进行 的 操作 。animation-fill- 
mode 属性 的 语法 格式 如 下 : 


animation-fill-mode:mode; 


mode 参数 可 以 有 以 下 值 。 

@ none 默认 值 ， 表 示 动 画 将 按照 定义 的 顺序 执行 ， 在 完成 后 返回 到 初始 关键 帧 。 
e@ forwards 表示 动画 在 完成 后 继续 使 用 最 后 关键 帧 的 值 。 

e@ backwards ”表示 动画 在 完成 后 使 用 开始 关键 帧 的 值 。 

@ both 同时 应 用 forwards 和 backwards 的 效果 。 


叫 ) 11.3.2 @keyframes 动画 帧 
使 用 animation 属性 定义 CSS3 动画 时 需要 两 个 步骤 第 一 步 是 定义 动画 ， 第 二 步 是 调用 


动 


辆 | 


读者 在 使 用 动画 之 前 必须 用 @keyframes 规则 来 定义 动画 。 该 规则 的 语法 如 下 : 


@keyframes <identifier> { <keyframes-blocks> } 
<keyframes-blocks>:[ [from | to | <percentage> ]{ sRules }] [[, from | to | <percentage> ]{ sRules } ]# 
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其 中 ，<identifier> 中 的 identifier 定义 一 个 动画 名 称 ， 该 名 称 与 animation-name 属性 的 值 
相对 应 ; <keyframes-blocks> 定义 动画 在 每 个 阶段 的 样式 ， 即 帧 动画 。 
【 例 11-8】 
使 用 @keyframes 规则 定义 动画 时 ， 简 单 的 动画 可 以 直接 使 用 关键 字 from 和 to， 即 从 一 
种 状态 过 渡 到 另 一 种 状态 。 下 面 用 代码 定义 的 动画 表示 某 个 东西 逐渐 消失 。 


@keyframes testanimations { 
from { opacity: 1; } 
to {opacity: 0; } 

} 


【 例 11-9】 
相对 比较 复杂 的 动画 ， 可 以 混合 百分比 值 设置 某 个 时 间 段 内 任意 时 间 点 的 样式 。 代 码 
如 下 : 


@keyframes testanimations { 


from { transform: translate(0, 0); } 
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20% { transform: translate(20px, 20px); } 
40% { transform: translate(40px, 0); } 
60% { transform: translate(60px, 20); } 
80% { transform: translate(80px, 0); } 


to { transform: translate(100px, 20px); } 
} 


如 果 不 想 使 用 关键 字 form 和 to， 可 以 直接 使 用 百分比 。 以 下 代码 等 价 于 上 述 代码 


@keyframes testanimations{ 
0% { transform: translate(0, 0); } /* 0% 不 能 直接 写 0 */ 
20% { transform: translate(20px, 20px); } 
40% { transform: translate(40px, 0); } 
60% { transform: translate(60px, 20px); } 
80% { transform: translate(80px, 0); } 
100% { transform: translate(100px, 20px); } 
} 


使 用 @keyframes 规则 定义 动画 ， 但 是 这 样 定义 的 动画 并 不 会 自动 执行 ， 还 需要 “调用 
动画 ”， 这 样 动 画 才 会 生效 。 其 实 这 就 跟 JavaScript 的 函数 一 样 ， 首 先 定 义 函数 ， 然 后 只 有 调 
用 函数 ， 函 数 才 会 执行 生效 。 

【 例 11-10]】 

在 网 页 中 添加 一 个 div 元 素 ， 为 该 元 素 添加 以 下 代码 : 


<style type="text/css"> 
@-webkit-keyframes mycolor { 
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0%{background-color:red;} /* 定义 动画 开始 时 的 关键 帧 */ 
30%{background-color:blue;} /* 定义 动画 进行 30% 时 的 关键 帧 */ 
60%{background-color:yellow;} 定义 动画 进行 60% 时 的 关键 帧 */ 
100%{background-color:green;} /* 定义 动画 进行 100% 时 的 关键 帧 */ 
} 
div { width:100px; height:100px; border-radius:50px; background-color:red; } 
div:hover { 
-webkit-animation-name:mycolor; /* 指定 执行 mycolor 动画 */ 
-webkit-animation-duration:5s; 族 指定 动画 的 执行 时 间 */ 
-webkit-animation-timing-function:linear; /* 指定 动画 的 播放 类 型 */ 
作 省 略 其 他 代码 */ 
} 
</style> 
上 述 代码 使 用 @keyframes 规则 定义 了 一 个 名 为 mycolor 的 动画 ， 刚 开始 时 背景 颜色 为 红 
色 ， 在 0% 到 30% 之 间 背 景 颜色 从 红色 变 为 蓝 色 ， 然 后 在 30% 到 60% 之 间 背 景 颜色 从 蓝 色 
变 为 黄色 ， 最 后 在 60% 到 100% 之 间 背 景 颜色 从 蓝 色 变 为 绿色 。 动 画 执行 完毕 ， 背 景 颜 色 回 
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归 红 色 〔 初 始 值 ) 。 
在 该 例 中 , 设置 在 鼠标 移动 到 div 元 素 时 (div:hover) 使 用 animation-name 属性 调用 动画 名 ， 
然后 使 用 animation-duration 属性 定义 动画 持续 总 时 间 、 使 用 animation-timing-function 属性 定 
义 动 画 类 型 等 。 


叫 ) 11.3.3 ”同时 改变 多 个 属性 的 动画 

在 定义 关键 帧 时 ， 不 仅 可 以 指定 一 个 background-color 属性 , 还 可 以 指定 多 个 CSS 属性 ， 
包含 前 面 介绍 的 transform 属性 ， 这 样 就 可 以 实现 更 复杂 的 动画 。 

【 例 11-11】 

在 上 个 例子 的 基础 上 更 改 代码 , 分 别 指定 动画 开始 , 进行 到 30%、60%, 结束 时 的 动画 帧 。 
样式 代码 如 下 


@-webkit-keyframes mycolor { 
0%{background-color:red;} 
30%{background-color:blue;transform:translate(300px,300px) scale(2.0,2.0);  /* 省 略 其 他 代码 */} 
60%{background-color:yellow;transform:translate(600px,150px) scale(1.5,1.5); /* 省 略 其 他 代码 */} 
100%{background-color:green;transform:translate(900px,Opx); A* 省 略 其 他 代码 */} 
} 


在 上 述 代码 中 ， 当 动画 进行 到 30% 时 ， 除 了 更 改 背 景 颜色 外 ， 还 会 将 当前 的 元 素 沿 X 
轴 和 YY 轴 平移 300 像素 ， 同 时 元 素 扩大 到 两 售 ， 当 动画 进行 到 60% 时 ， 更 改 背景 颜色 为 黄色 ， 
将 当前 元 素平 移 到 X 轴 600 像素 、Y 轴 150 像素 处 , 此 时 元 素 是 原来 的 1.5 倍 ; 在 动画 结束 时 ， 
背景 色 为 绿色 , 平移 到 距离 又 轴 900 像素 处 , 同时 元 素 不 进行 缩放 , 和 开始 时 的 大 小 保持 一 致 。 


咱 ) 11.3.4 ”实践 案例 : 绘制 旋转 的 太极 图 案 
第 10 章 已 经 详细 介绍 了 如 何 绘制 静态 太极 图 案 ， 学 习 过 动画 以 后 ， 读 者 可 以 快速 地 通过 
相关 知识 制作 动态 的 太极 图 。 
本 节 实 践 案例 在 上 一 章节 静态 图 案 的 基础 上 添加 样式 代码 。 首 先 ， 通 过 @keyframes 定 
义 名 称 为 rotation 的 动画 ， 指 定 动画 开始 和 结束 时 的 动画 帧 效果 。 代 码 如 下 : 
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@keyframes rotation { 

0%{ 
transform:rotate(Odeg); 
-webkit-transform:rotate(Odeg); 
-moz-transform:rotate(Odeg); 
-o-transform:rotate(0deg); 

} 

100%{ 
transform:rotate(360deg); 
-webkit-transform:rotate(360deg); 
-moz-transform:rotate(360deg); 
-o-transform:rotate(360deg); 
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} 
} 
/* 省 略 其 他 浏览 嚣 引擎 的 定义 */ 


为 页 面 中 box-taiji 的 div 元 素 添加 样式 ， 在 该 样式 中 通过 animation 属性 指定 动画 ， 设 置 
动画 播放 的 时 间 、 方 式 以 及 播放 次 数 等 。 代 码 如 下 : 


.box-taiji { 
width:400px;height:400px;position:relative;margin:50px auto; border-radius:400px; 
background-color:#000;box-shadow:0 0 50px rgba(0,0,0,.8); 
animation:rotation 2.5s linear infinite; 
-webkit-animation:rotation 2.5s linear infinite; 
-moz-animation:rotation 2.5s linear infinite; 
-0-animation:rotation 2.5s linear infinite; 


中 


以 上 样式 代码 添加 完毕 后 ， 刷 新 页 面 或 重新 运行 网 页 查看 动画 效果 ， 这 里 不 再 抓 取 具 体 
的 效果 图 。 


7) 11.4 ”实践 案例 : 动态 复古 时 钟 


时 钟 是 生活 中 常用 的 一 种 计 Vo > 是 SIE 
时 器 ， 人 们 通过 它 来 记录 时 间 。 Dn 本 


随 着 社会 的 发 展 ， 时 钟 的 种 类 越 
来 越 多 ， 而 且 外 观 越 来 越 好 看 。 
本 节 实 践 案例 利用 本 章 的 知识 点 
模拟 实现 动态 复古 时 钟 ， 运 行 时 
钟 的 效果 如 图 11-10 所 示 。 

根据 效果 图 进行 设计 ， 主 要 
步骤 如 下 。 
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图 11-10 复古 时 钟 


攻克 创建 HIML 网 页 ， 在 页 面 中 添加 最 外 层 的 div 元 素 ， 该 元 素 包 含 两 部 分 ， 一 部 分 控 
制 时 钟 的 上 半 部 分 ， 另 一 部 分 控制 时 钟 下 方 的 钟 摆 部 分 。 代 码 如 下 


<div class="clock"> 
<div class="body-top"> 
<div class="dial"> 


<div class="second-hand"></div> 


国 296 


第 1 章 变形、 过渡 和 动画 
一 


<div class="minute-hand"></div> 


<div class="hour-hand"></div> 
</div> 

</div> 

<div class="body-bottom"> 

<div class="pendulum"> 

<div class="pendulum-stick"></div> 
<div class="pendulum-body"></div> 
</div> 

</div> 

</div> 


看台 设计 div 元 素 的 样式 ， 元 素 初 始 样式 代码 如 下 : 


.clock { height: 400px; width: 220px; margin: 0 auto;} 
,clock .body-top { height: 200px; margin: 0; padding: 0; border-radius: 400px 400px 0 0; background-color: 
#B28247; } 
.body-top .dial { 
height: 150px; width: 150px; margin: 0 auto; position: relative; border-radius: 200px; 
background-color: #C9BC9C; 
transform: translateY(30px); /* 沿 Y 轴 平移 30 像 票 */ 
/* 省 略 代码 */ 
} 


0 可 设置 时 钟 的 “秒针 ”部 分 ， 指 定 秒针 的 长 度 、 宽 度 、 圆 角 、 背 景 颜 
及 动画 效果 等 。 内 容 如 下 : 


[ 攻 


、 中 心 原点 以 
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.dial .second-hand { 
height: 74px; width: 10px; border-radius: 20px; position: absolute; z-index: 2; 


background-color: #7F4F21; 人 # 设置 背景 颜色 */ 
transform-origin: 50% Spx; 诺 设 置 中 心 原点 */ 
animation: timehand 60s steps(60, end) infinite; /# 设置 动画 效果 *#/ 
姓 其 他 代码 */ 


厢 愉 设置 时 钟 的 “分 针 ” 部 分 ， 指 定 分 针 的 长 度 、 宽 度 、 圆 角 、 背 景 颜色 、 中 心 原 点 以 
及 动画 效果 等 。 内 容 如 下 : 


.dial .minute-hand { 


height: 70px; width: 10px; border-radius: 20px; position: absolute; z-index: 3; 


background-color: #40220F; 廊 设 置 背 景 颜色 */ 
transform-origin: 50% Spx; 语 设置 中 心 原点 */ 
animation: timehand 3600s steps(3600, end) infinite; 设置 动画 效果 */ 
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四 吕 设置 时 钟 的 “时 针 ” 部 分 ， 指 定时 针 的 长 度 、 宽 度 、 贺 角 、 背 景 颜 1 


及 动画 效果 等 。 内 容 如 下 : 


.dial .hour-hand { 
height: 50px; width: 10px; border-radius: 20px; position: absolute; z-index: 4; 


background-color: black; /* 设置 背景 颜色 */ 
transform-origin: 50% 5px; /* 设置 中 心 原点 */ 


animation: timehand 43200s steps(43200, end) infinite; 。 /* 设置 动画 效果 */ 
} 


厅 定义 timehand 动画 ， 指 定 动画 的 开始 帧 和 结束 帧 。 代 码 如 下 : 


@keyframes timehand { 
oO%{ 
transform: translate(70px, 75px) rotate(180deg); 
' 
100% { 
transform: translate(70px, 75px) rotate(539deg); 


} 
四 时 钟 钟 摆 部 分 元 素 的 原始 代码 如 下 : 


.clock .body-bottom { 
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background-color: #7F4F21; 
} 


1d 


町名 设计 时 钟 钟 摆 部 分 的 动画 样式 ， 内 容 如 下 : 


.body-bottom .pendulum { 


} 


@keyframes ticktock { 
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四 加 定义 ticktock 动画 ， 在 该 动画 中 指定 开始 帧 和 结束 帧 。 代 码 如 下 : 


色 


h 心 原点 以 


position: relative; z-index: -1; height: 190px; margin: 0; padding: 0; border-radius: 0 0 20px 20px; 


height: 140px; 六 高 度 */ 

animation-duration: 2s; 族 定义 整个 动画 的 完成 时 间 */ 
animation-name: ticktock; /* 定义 动画 名 称 */ 
animation-iteration-count: infinite; 族 动画 重复 播放 */ 
animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000); /#* 定义 动画 执行 类 型 */ 
animation-direction: alternate; /# 动画 播放 到 最 后 时 将 反 向 播放 */ 
animation-fil-mode: both; /* 向 前 和 向 后 填充 */ 
animation-play-state: running; 让 动画 的 播放 状态 */ 

transform-origin: 50% -70%; 序 设 置 中 心 原点 */ 


一 一 


0% 1 
transform: rotate(15deg); 
} 
100%{ 
transform: rotate(-15deg); 
} 
} 


第 1L 章 变形 、 过 湾 和 动画 [他 -| 


BB 运行 HTML 网 页 测试 效果 ， 最 终 的 效果 参考 图 11-10。 


7) 11.5 练习 题 


Sw 填空 题 

1. 元 素 从 一 个 位 置 平移 到 另 一 个 位 置 ， 使 用 transfomm 属性 的 方法 。 
2. 用户 改变 元 素 变 形 时 的 中 心 原点 位 置 ， 可 以 使 用 属性 。 

3， 动 画 开始 之 前 ， 用 户 指 定 属性 进行 延迟 。 

4. 属性 用 于 定义 整个 动画 效果 完成 所 需要 的 时 间 。 

5. animation-iteration-count 属性 的 值 设置 为 时 ， 表 示 动 画 无 限 重复 播放 。 
6， 定 义 动画 需要 用 规则 。 

二 、 选 择 题 

1. 将 某 一 个 元 素 在 原来 的 基础 上 缩小 到 原来 的 一 半 ， 主 要 用 到 选项 的 代码 。 
A. transfrom:scale(0.5): 

B. transfrom:scale(0.5deg); 

C. transfrom:scale(50%deg): 

D. transfrom:scale(1.5): 

2. 读者 可 以 使 用 方法 将 元 素 相对 中 心 原点 进行 旋转 。 

A. martix() 

B. scale() 

C. rotate() 

D. skew() 

3 属性 不 是 transition 复合 属性 的 子 属性 。 

A. transition-name 

B. transition-property 

C. transition-duration 

D. transition-delay 

4. 关于 animation-fill-mode:forwards 的 说 明 ， 说 法 是 正确 的 。 

A. 默认 值 ， 表 示 动 画 将 按照 定义 的 顺序 执行 ， 在 完成 后 返回 到 初始 关键 帧 
B. 动画 在 完成 后 继续 使 用 最 后 关键 帧 的 值 

C. 动画 在 完成 后 使 用 开始 关键 帧 的 值 

D. 动画 在 完成 后 先 使 用 最 后 关键 帧 的 值 ， 再 使 用 开始 关键 帧 的 值 
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关于 transform 属性 的 说 法 ， 下 面 选项 是 正确 的 。 
.CSS3 新 增加 的 变形 属性 只 能 和 过 渡 属 性 一 起 使 用 ， 不 能 和 动画 一 起 使 用 
. transform 属性 可 以 同时 指定 多 个 变形 方法 ， 但 是 该 方法 后 面 不 能 使 用 skew0 方法 
.transform 属性 可 以 同时 指定 多 个 变形 方法 ， 变 形 方法 的 顺序 无 论 如 何 排列 ， 最 终 的 
呈现 效果 是 一 样 的 

.transform 属性 可 以 同时 应 用 多 个 变形 ， 这 些 方法 的 顺序 非常 重要 ， 顺 序 不 同 ， 呈 现 
的 效果 也 不 相同 


< 上 机 练习 1: 图 片 文字 介绍 滑动 特效 


本 次 上 机 练习 要 求 读者 利用 本 章 介 绍 的 内 容 完 成 图 片 文 字 介 绍 的 滑动 效果 ， 当 鼠标 移 到 
图 片上 面 时 ， 文 字 介绍 会 过 渡 性 滑动 展示 ， 如 图 11-11 所 示 。 


OAWP>L 


已 
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图 11-11 图 片 文字 介绍 的 滑动 特效 


< 上 机 练习 2: 制作 波浪 形式 的 动画 特效 
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本 次 上 机 练习 要 求 读者 将 animation 属性 、transform 属性 及 其 之 前 的 内 容 结合 起 来 ， 制 
作 动态 的 波浪 形式 动画 ， 截 图 效果 如 图 11-12 所 示 。 


LaJLsTISTL 2] 
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图 11-12 制作 波浪 形式 的 动画 
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除了 前 面 几 章 介绍 的 内 容 外 ，CSS3 还 包含 很 多 其 他 类 型 的 属性 ， 例 如 盒 模型 属性 、 多 列 
布局 属性 、 渐 变 属 性 、 用 户 界面 属性 等 。 与 编程 有 关 的 人 员 都 知道 ， 网 页 布局 对 于 网 站 的 外 
观 非常 重要 ， 一 个 好 的 网 站 布局 不 仅 可 以 节省 美工 各 开发 人 员 的 时 间 ， 还 可 以 减少 许多 不 必 
要 的 代码 。 传 统 的 表格 布局 和 DIV+CSS 布局 是 美工 设计 网 站 的 首要 选择 ， 但 是 表格 布局 有 许 
多 缺陷 ， 例 如 代码 宛 余 、 浪 费时 间 等 ， 因 此 DIV+CSS 是 目前 主流 的 网 页 布局 。 

CS5S 的 功能 非常 强大 ， 除 了 前 面 介绍 的 样式 之 外 ， 还 可 以 控制 页 面 的 布局 ， 例 如 通过 
float 属性 控制 多 列 布局 ， 使 用 clear 属性 强制 换行 等 。 

本 章 将 详细 介绍 C553 中 新 增加 的 其 他 属性 ， 例 如 多 列 布局 属性 、 盒 模型 布局 属性 、 渐 变 
属性 等 。 通 过 本 章 的 学 习 ， 读 者 可 以 更 加 轻松 方便 地 设计 网 站 ， 制 作 更 加 美观 、 功 能 强大 的 
页 面 。 


人 ， 本 章 学 习 要 点 
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外) 12.1 多 列 布局 属性 


在 CSS3 之 前 的 版 本 中 ， 需 要 依靠 浮动 布局 和 定位 布局 来 实现 页 面 的 多 列 布局 设计 。 前 
者 比较 灵活 ， 但 是 容易 发 生 布局 错乱 影响 页 面 的 整体 效果 ， 而 且 在 实现 时 需要 大 量 的 样式 代 
码 ， 增 加 了 设计 员 的 工作 量 ; 后 者 可 以 实现 精确 定位 ， 但 是 无 法 满足 模块 的 自 适 用 能 力 ， 以 
及 模块 间 的 文档 流 联动 需要 。 

为 了 解决 上 述 问题 ，CSS3 版 本 中 增加 了 多 个 自动 布局 属性 ， 这 些 属性 可 以 自动 将 内 容 
按 指定 的 列 数 排列 ， 特 别 适合 报纸 和 杂志 等 类 的 网 页 布局 。 


叫 )》 12.1.1 多 列 布局 属性 列表 

当 一 行文 字 太 长 时 ， 读 者 读 起 来 就 比较 费劲 ， 有 可 能 读 错 行 或 读 串 行 ， 人 们 的 视点 要 从 
文本 的 一 端 移 到 另 一 端 ， 然 后 换 到 下 一 行 的 行 首 ， 如 果 眼 球 移动 幅度 过 大 ， 他 们 的 注意 力 就 
会 减退 ， 容 易 读 不 下 去 。 
因此 ， 为 了 最 大 效率 地 使 用 大 屏幕 显示 器 ， 设 计 页 面 时 需要 限制 文本 的 宽度 ， 让 文本 按 
多 列 呈 现 ， 就 像 报 纸 上 的 新 闻 排 版 一 样 。CSS3 中 新 出 现 的 多 列 布局 是 传统 HIML 网 页 中 块 
状 布局 模式 的 有 力 扩充 。 这 种 新 语法 能 够 让 Web 开发 人 员 轻 松 地 让 文本 呈现 多 列 显示 。 

表 12-1 说 明了 CSS3 新 增加 的 多 列 布局 属性 。 

表 12-1 多 列 布局 属性 及 其 说 明 
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属 性 说 明 
columns 设置 或 检索 对 象 的 列 数 和 每 列 的 宽度 。 属 于 复合 属性 
column-width 设置 或 检索 对 象 每 列 的 宽度 
column-count 设置 或 检索 对 象 的 列 数 
column-gap 设置 或 检索 对 象 的 列 与 列 之 间 的 间隙 
column-rule 设置 或 检索 对 象 的 列 与 列 之 间 的 边框 。 属 于 复合 属性 
column-rule-width 设置 或 检索 对 象 的 列 与 列 之 间 的 边框 厚度 
column-rule-style 设置 或 检索 对 象 的 列 与 列 之 间 的 边框 样式 
column-rule-color 设置 或 检索 对 象 的 列 与 列 之 间 的 边框 颜色 
column-span 设置 或 检索 对 象 元 素 是 否 横 跨 所 有 列 
column-fill 设置 或 检索 对 象 所 有 列 的 高 度 是 否 统一 
column-break-before 设置 或 检索 对 象 之 前 是 否 断 行 
column-break-after 设置 或 检索 对 象 之 后 是 否 断 行 
column-break-inside 设置 或 检索 对 象 内 部 是 否 断 行 
叫 ) 12.1.2 设置 显示 列 的 宽度 

column-width 属性 用 于 设置 页 面 上 单列 显示 的 宽度 ， 它 适用 于 除了 表格 元 素 之 外 的 非 蔡 

换 块 元 素 、 行 内 块 元 素 和 表单 元 格 。 基 本 语法 如 下 : 
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column-width:<length> | auto 
其 中 ， 
示 根 据 浏 览 器 计算 值 自动 设置 。 
【 例 12-1】 
在 创建 的 HTML 页 面 中 添加 div 元 


所 示 。 


DE A 


© © tie//DyFirstTesywork/index hm 


首页 | 关于 大 襄 | 小 小 的 花 1 我 的 同 宫 | 联系 人 
而 十 月 色 ( 摘 选 ) 


心里 频 不 宁静 . ee 


同 儿 加速 条 地 卫 了 下 . Er Er 


gp 是 一 条 曲折 的 小 伸 忆 路 。 这 是 一 条 出 局 的 首 ; 白天 

we He [| ,长 着 许多 全 ， 英 闫 部 部 的 . 
知道 名 字 的 树 。 没 有 月 光 的 晚上 

区 by Si 呈 关 月 光 也 还 是 湾 湾 


图 12-1 默认 效果 


根据 图 12-1 所 示 的 效果 进行 


width 属性 的 值 为 200 像素 ， 代 码 如 下 : 


咱 ) 12.1.3 设置 显示 的 固定 列 


column-width 属性 单独 使 用 时 可 以 限制 | 
模块 的 单列 宽度 ， 当 超出 宽度 时 则 自动 以 多 | 
列 进行 显示 。 当 然 ，column-width 属性 还 可 | 
以 与 其 他 的 多 列 布局 属性 一 起 使 用 ， 用 于 设 | 


计 指 定 固定 列 的 列 数 、 列 宽 的 布局 效果 等 ， 
如 column-count 属性 。 

column-count 属性 用 于 设置 页 面 上 对 象 
显示 的 列 数 。 语 法 如 下 : 


column-count:<integer> | auto 


从 上 述 语法 可 以 看 出 ，column-count 属 | 


性 有 两 种 取 值 。 integer 用 来 定义 栏目 的 列 数 ， 
它 的 取 值 是 一 个 大 
值 。auto 表示 根据 浏览 器 计算 值 自动 设置 。 


如 果 column-width 和 column-count 属性 没有 | 


length 表示 由 浮 点 数字 和 单位 标 
识 符 组 成 的 长 度 值 ， 不 可 以 为 负 值 。auto 表 


素 、p 元 素 、hl 元 素 等 ， 设 计 效 果 如 图 12-1 | 


设计 ， 设 计 | 
完成 后 ， 设 置 文章 部 分 的 宽度 ， 指 定 column- | 


于 0 的 整数 ， 不 多 许 为 负 


.personArticle{ 
border:1px dotted gray; 
column-width:200px; 

} 


: 设置 column-width 属性 的 值 后 ， 
| 行 页 面 ， 效 果 如 图 12-2 所 示 。 


D doETxs5 +* 
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荷 寻 月 色 ( 搞 选 ) 


起 日 日 走 过 的 共 嫩 ,在 这 满 
的 光 里 ， 总 该 另 有 一 看 样子 
吧 。 月 况 源 渐 地 升 育 了, 培 外 
马路 上 孩子 们 的 欢笑 ,已 经 昕 
i 雪 在 层 举 拍 着 辣 儿 , 
广 其 期 地 号 关 到 歌 我 情 悄 
Pes 带 上 门 出 去 . 


上 阳 林 可 的 ， 有些 怕人 . 
和 ,， 晶 然 月 光 也 还 是 淡 湾 


es 个 人 , 间 着 手 


图 12-2 设置 column-width 属性 


明确 值 ， 则 其 值 为 最 大 列 数 。 
【 例 12-2]】 


在 上 个 例子 的 基础 上 进行 更 改 ， 将 
column-width 属性 设计 为 100 像素 ， 同 时 


| 指定 column-count 属性 的 值 为 3， 表 示 文 
| 章 内 容 以 三 列 进行 显示 。 有 关 样 式 代 码 
| 如 下 : 


.personArticle{ 
border:1px dotted gray; 
column-width:100px; 


column-count:3; 


一 


运行 页 面 ， 效 果 如 图 12-3 所 示 。 
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F 向 壤 月 色 ( 摘 选 ) | 


渐 地 : ， 墙 外 
马路 上 孩子 们 的 欢 
年 P31 不 由 


图 12-3 设置 column-count 属性 


串 ) 12.1.4 ”设置 显示 列 的 样式 
CSS3 中 新 增加 的 column-rule 属性 用 于 设置 多 列 布局 时 列 之 间 边框 的 宽度 、 样式 和 颜色 。 
语法 如 下 : 


column-rule:[ column-rule-width ] | [ column-rule-style ] | [ column-rule-color ] 


其 中 ， 各 个 属性 值 的 取 值 含义 如 下 。 

@ column-rule-width ”设置 列 之 间 的 边框 宽度 。 

®@ column-rule-style 设置 列 之 间 的 边框 样式 。 

®@ column-rule-color 设置 列 之 间 的 边框 颜色 。 

【 例 12-3] 

通过 column-rule 属性 设置 列 与 列 之 间 的 边框 效果 ， 边 框 宽度 为 2 像素 ， 以 虚线 方式 显示 ， 
同时 将 边框 颜色 指定 为 红色 。 样 式 代 码 如 下 : 
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.personArticle{ 
border:1px dotted gray; 
column-width:100px; 族 设 置 固定 列 的 宽度 */ 
column-count:3; 人 # 设置 显示 的 固定 列 数 */ 
column-rule: 2px dashed RED; /* 设置 列 与 列 之 间 的 边框 样式 */ 
} 


上 述 代 码 对 应 的 边框 显示 效果 如 图 12-4 所 示 。 


癌 小 4 的 寺 个 人 地 罕 


* 
C |@ fley/DyFirstTesyworwindexhtml 


Fr 认 塘 月 色 ( 搞 先 ) 


图 12-4 设置 column-rule 属性 
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column-rule 属性 是 一 个 复合 属性 ， 该 属性 派生 3 个 与 列 边 框 相关 的 属性 : column-rule- 

width 属性 、column-rule-style 属性 和 column-rule-color 属性 。 

e column-rule-width ”用 于 设置 列 与 列 之 间 边 框 的 宽度 。 值 是 浮 点 数 ， 但 是 不 能 为 负 值 ; 
如 果 值 为 none， 则 自动 忽略 该 属性 。 

@ column-rule-style 用 于 设置 列 与 列 之 间 边 框 的 样式 。 如 果 column-rule-width 属性 的 
值 设置 为 0， 则 自动 忽略 该 属性 。 该 属性 的 取 值 可 以 是 none、hidden、dotted、dashed、 
solid、double、groove、ridge、inset 和 outset。 

e column-rule-color 用 于 设置 列 与 列 之 间 边 框 的 颜色 ， 值 可 以 是 所 有 的 颜色 。 如 果 
column-rule-width 等 于 0 或 column-rule-style 设置 为 none， 本 属性 将 会 自动 被 忽略 。 

【 例 12-4】 
继续 更 改 上 个 例子 的 代码 ，column-rule 属性 的 样式 可 以 用 以 下 代码 代替 。 


column-rule-width:2px; 


/* 设置 列 与 列 之 间 边 框 的 宽度 */ 


column-rule-style:dashed; /# 设置 列 与 列 之 间 边框 的 样式 */ 


column-rule-color:RED; 


性 设置 列 与 列 之 间 边 框 的 颜色 


川 ) 12.1.5 设置 各 列 间 的 间距 
多 列 布局 属性 column-gap 用 于 设置 多 列 布局 时 的 列 间距 ， 语 法 如 下 : 


column-gap:<length> | normal 


其 中 


Ph，length 表示 


浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 以 为 负 值 ，normal 根据 


浏览 器 默认 设置 进行 解析 ， 一 般 为 lem， 即 16px。 
【 例 12-5】 
通过 column-gap 属性 设置 列 与 列 之 间 的 间距 ， 将 属性 值 设置 为 30 像素 。 代 码 如 下 : 


.personArticle{ 
border:1px dotted gray; 
column-width:100px; /* 设置 固定 列 的 宽度 */ 
column-count:3; 人 # 设置 显示 的 固定 列 数 */ 
column-rule-width:2px; 访 设 置 列 与 列 之 间 边框 的 宽度 */ 
column-rule-style:dashed; /* 设置 列 与 列 之 间 的 样式 */ 
column-rule-color:RED; 人 # 设置 列 与 列 之 间 边框 的 颜色 */ 


column-gap:30px; 


信 设置 列 与 列 之 间 的 间距 */ 


9j)) 12.2 ”弹性 盒 模型 属性 


网 络 布 
float 属性 ， 但 是 这 对 了 


局 是 CSS 的 一 个 重点 应 用 ， 布 局 的 传统 解决 方案 依赖 display 属性 +position 属性 十 


那些 特殊 布局 非常 不 适用 ， 例 如 垂直 居中 就 不 容易 实现 。W3C 提出 了 


一 种 新 的 布局 ， 可 以 简便 、 完 整 、 响 应 式 地 实现 各 种 页 面 布局 。 
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川 ) 12.2.1 flex 布局 属性 


W3C 规范 增加 了 新 的 盒 模型 布局 属性 ， 这 些 盒 模型 针对 以 box- 开头 的 属性 进行 修改 ， 
修改 后 的 盒 模型 以 flex- 开头 ， 以 flex- 开头 的 属性 通常 被 称 为 flex 布局 。flex 是 Flexible Box 
的 缩写 ， 即 “弹性 布局 ?”， 用 来 为 盒 状 模型 提供 最 大 的 灵活 性 。 任 何 一 个 容器 都 可 以 指定 为 
flex 布局 。 


.box{ display:flex; } 


行内 元 素 也 可 以 使 用 flex 布局 : 


.box{ display:inline-box; } 


A Se 


设置 flex 布局 以 后 ， 子 元 素 的 float、clear 和 vertical-align 属性 将 失效 。 


伍 Mex 布局 示意 图 


采用 fkex 布局 的 元 素 , 称 为 flex 容器 (flex 
container) ， 简 称 容器 。 它 的 所 有 子 元 素 自 
动 成 为 容器 成 员 ， 称 为 Bex 项 目 (flex 
item) ， 简 称 项 目 。flex 布局 的 说 明 如 图 12-5 


从 图 12-5 中 可 以 看 出 ， 容 器 默认 存在 
两 根 轴 水 平 的 主轴 (main axis) 和 垂直 
的 交叉 轴 (cross axis) 。 其 中 ， 主 轴 的 开始 
位 置 〈 与 边框 的 交叉 点 ) 叫 作 main start， 
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所 示 。 结束 位 置 叫 作 main end， 交 叉 轴 的 开始 
5 位 置 叫 作 cross start， 结 束 位 置 叫 作 cross 

We 区 csa axle end。 
EES 0 四 项 目 默 认 沿 主轴 排列 。 单 个 项 目 占据 的 
二 二 二 二 主轴 空间 叫 作 main size， 占 据 的 交叉 轴 空 间 


叫 作 cross size。 


---main size -~ cross size 


鲍 fiex 布局 属性 列表 
flex 布局 的 属性 以 flex- 开头 ， 通 过 这 些 
属性 , 可 以 设置 弹性 盒 的 扩展 比例 、 收 缩 比例 、 
盒 对 象 的 子 元 素 的 出 现 顺序 等 内 容 ， 具 体 属 

性 及 其 说 明 如 表 12-2 所 示 。 


PP-- main start cross end ; main end -- 


图 12-5 flex 布局 说 明 


表 12-2 盒 模 型 的 属性 及 其 具体 说 明 


属性 名 称 说 明 
flex 复合 属性 。 设 置 或 检索 伸缩 金 对 象 的 子 元 素 如 何 分 配 空间 
sw | 设 轩 或 检索 弹性 金 的 扩展 比例 
Hi | 设 于 或 检 索 弹 性 金 的 收缩 比例 
eb | 设 于 或 检索 到 性 金 的 伸缩 基准 值 
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( 续 表 ) 
属性 名 称 说 明 
flex-flow 复合 属性 。 设 置 或 检索 伸缩 爹 对 象 的 子 元 素 排列 方式 
flex-direction 设置 或 检索 伸缩 金 对 象 的 子 元 素 在 父 容器 中 的 位 置 
flex-wrap 设置 或 检索 伸缩 爹 对 象 的 子 元 素 超 出 父 容 器 时 是 否 换行 
align-content 设置 或 检索 弹性 金 堆 司 伸 缩 行 的 对 齐 方 式 
align-items 设置 或 检索 弹性 金子 元 素 在 侧 轴 【〔 纵 轴 ) 方向 上 的 对 齐 方式 
align-self 设置 或 检索 弹性 念 子 元 素 自身 在 侧 轴 〈 纵 轴 ) 方向 上 的 对 齐 方式 
justify-content 设置 或 检索 弹性 金子 元 素 在 主轴 ( 横 轴 ) 方向 上 的 对 齐 方式 
order 设置 或 检索 伸缩 念 对 象 的 子 元 素 出 现 的 顺序 


川 )》 12.2.2 flex-direction 属性 


flex-direction 属性 通过 定义 flex 容器 的 主轴 方向 来 决定 flex 子 项 在 flex 容器 中 的 位 置 。 
flex-direction 属性 的 反 转 取 值 不 影响 元 素 的 绘制 ， 语 言 和 导航 顺序 ， 只 改变 流动 方向 。 
flex-direction 属性 的 基本 语法 如 下 : 


flex-direction:row | row-reverse | column | column-reverse 


关于 flex-direction 属性 的 取 值 以 及 说 明 如 下 。 

e@ row 主轴 与 行内 轴 方 向 作为 默认 的 书写 模式 ， 即 横向 从 左 到 右 排列 ( 左 对 齐 ) 。 

®@ row-reverse “主轴 为 水 平方 向 ， 起 点 在 右 端 ， 即 从 右 到 左 排列 ， 对 齐 方式 与 row 相反 。 

e@ column 主轴 与 块 轴 方向 作为 默认 的 书写 模式 ， 即 纵向 从 上 往 下 排列 ( 顶 对 齐 ) 。 

e@ column-reverse ”主轴 为 垂直 方向 ， 起 点 在 下 沿 ， 即 从 下 往 上 排列 ， 对 齐 方式 与 column 
相反 。 

【 例 12-6] 

创建 静态 的 HIML 网 页 ， 在 页 面 中 添加 以 下 代码 : 


1dloSeAer+SsSSI+S1WNLH 人 


<h2>flex-direction:row</h2><ul id="box" class="box"><li>a</li><li>b</li><li>c</li></ul> 
<h2>flex-direction:row-reverse</h2><ul id="box2" class="box"><li>a</li><li>b</li><li>c</li></ul> 
<h2>flex-direction:column</h2><ul id="box3" class="box"><li>a</li><li>b</li><li>c</li></ul> 


<h2>flex-direction:column-reverse</h2><ul id="box4" class="box"><li>a</li><li>b</li><li>c</li></ul> 


为 上 述 中 的 网 页 元 素 添加 以 下 CSS 样式 : 


hi1{ font:bold 20px/1.5 georgia,simsun,sans-serif;} 

.box{ display:-webkit-flex; display:flex; margin:0;padding:10px;list-style:none;background-color:#eee;} 
.box li{width:50px;height:50px;border:1px solid #aaa;text-align:center; } 

#box{ -webkit-flex-direction:row; flex-direction:row;} 


#box2{ -webkit-flex-direction:row-reverse; flex-direction:row-reverse; } 
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#box3{ height:200px; -webkit-flex-direction:column; flex-direction:column; } 


#box4{ height:200px; -webkit-flex-direction:column-reverse; flex-direction:column-reverse; } 


运行 上 述 相关 代码 , 效果 如 图 12-6 所 示 。 a 
女 ] 
flex-direction 示 例 : 
flex-direction:row 
: 
flex-direction:row-reverse 


flex-direction:column 


flex-direction:column-reverse 


图 12-6 flex-direction 属性 效果 


咱 》 12.2.3 flex-wrap 属性 


flex-wrap 属性 用 于 指定 内 部 元 素 在 flex 容器 中 是 如 何 布局 的 ， 定 义 了 主轴 的 方向 〈 正 方 
向 或 反方 向 ) 。 默 认 情 况 下 ， 项 目 都 排 在 一 条 线 〈 又 称 轴线 ) 上 。 如 果 一 条 轴线 排 不 下 ， 可 
以 用 flex-wrap 属性 定义 换行 。 基 本 语法 如 下 : 


1dl13SeAer+ESSI+9T1W1H 人 


flex-wrap:nowrap | wrap | wrap-reverse 


从 上 述 语法 可 以 知道 ，flex-wrap 属性 的 可 取 值 有 3 个 ， 具 体 说 明 如 下 。 
@ nowrap flex 容器 为 单行 。 该 情况 下 flex 子 项 可 能 会 溢出 容器 。 
@ WwWrap flex 容器 为 多 行 。 该 情况 下 flex 子 项 溢出 的 部 分 会 被 放置 到 新 行 ， 子 项 内 部 会 发 
生 断 行 。 
@ wrap-reverse 反 转 wrap 排列。 
【 例 12-7]】 
创建 静态 的 HTML 网 页 ， 在 页 面 中 添加 ulli 项 目 列表 ， 部 分 代码 如 下 : 


<ul id="box" class="box"> 
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</ 
li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li> 


</ul> 
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为 页 面 中 的 ul LI 元素 添加 样式 ， 样 式 代码 如 下 : 


.box{ display:-webkit-flex; display:flex; width:800px; margin:0; padding:10px; list-style:none; background - 


color:#eee;} 


运行 上 述 样 式 代 码 ， 结 果 如 图 12-7 
所 示 。 


.box li{width:50px;height:50px;border:1px solid #aaa;text-align:center; vertical-align:middle;} 
#box{ -webkit-flex-wrap:nowrap; flex-wrap:nowrap;} 

#box2{ -webkit-flex-wrap:wrap; flex-wrap:wrap;} 

#box3{ -webkit-flex-wrap:wrap-reverse; flex-wrap:wrap-reverse;} 


JISTISTET 


flex-wrap 示 例 : 
flex-wrap:nowrap 


1|2]3[4[s5 


日 


加 回回 加 回民 EE 
加 | 


flex-wrap:wrap 


半天 疾病 湖 匡 14 


CR EC EE ED 
| 


| 


16 


了 | 六 | 
flex-wrap:wrap-reverse 
EEED 
1 之 3 | 4 到 立国 圈 蕉 圈 辆 医 妆 关 图 
| 


图 12-7 flex-wrap 属性 效果 


川 ) 12.2.4 justify-content 属性 


弹性 盒 


justify-content 属性 用 于 设置 或 检索 弹性 盒子 元 素 在 主轴 〈 横 轴 ) 方向 上 的 对 齐 方式 。 当 
里 一 行 上 的 所 有 子 元 素 都 不 能 伸缩 或 已 经 达到 其 最 大 值 时 ， 这 一 属性 可 协助 对 多 余 的 


空间 进行 分 配 。 当 元 素 溢出 某 行 时 ， 这 一 属性 同样 会 在 对 齐 方式 上 进行 控制 。 
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justify-content 属性 的 语法 如 下 : 


justify-content: flex-start | flex-end | center | space-between | space-around 


关于 justify-content 属性 的 取 值 说 明 如 下 。 
® flex-start 默认 值 ， 弹 性 盒子 元 素 将 向 行 起 始 位 置 对 齐 。 该 行 的 第 一 个 子 元 素 的 主 起 始 


位 置 的 边界 将 与 该 行 的 主 起 始 位 置 的 边界 对 齐 ， 同 时 所 有 后 续 的 伸缩 盒 项 目 与 其 前 一 个 
项 目 对 齐 。 

flex-end ”弹性 盒子 元 素 将 向 行 结束 位 置 对 齐 。 该 行 的 第 一 个 子 元 素 的 主 结束 位 置 的 边界 
将 与 该 行 的 主 结束 位 置 的 边界 对 齐 ， 同 时 所 有 后 续 的 伸缩 盒 项 目 与 其 前 一 个 项 目 对 齐 。 
center ”弹性 盒子 元 素 将 向 行 中 间 位 置 对 齐 。 该 行 的 子 元 素 将 相互 对 齐 并 在 行 中 居中 对 
齐 ， 同 时 第 一 个 元 素 与 行 的 主 起 始 位 置 的 边 距 等 同 于 最 后 一 个 元 素 与 行 的 主 结束 位 置 的 
边 距 ( 如 果 剩余 空间 是 负数 ， 则 保持 两 端 相 等 长 度 的 溢出 ) 。 

space-between ”弹性 盒子 元 素 在 行 中 平均 分 布 。 如 果 最 左边 的 剩余 空间 是 负数 ， 或 该 
行 只 有 一 个 子 元 素 ， 则 该 值 等 效 于 flex-start。 在 其 他 情况 下 ， 第 一 个 元 素 的 边界 与 行 的 主 
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起 始 位 置 的 边界 对 齐 ， 同 时 最 后 一 个 元 素 的 边界 与 行 的 主 结束 位 置 的 边界 对 齐 ， 而 剩余 
的 伸缩 盒 项 目 则 平均 分 布 ， 并 确保 两 两 之 间 的 空白 空间 相等 。 

e@ space-around 弹性 盒子 元 素 在 行 中 平均 分 布 ， 两 端 保留 子 元 素 与 子 元 素 之 间 间 距 大 
小 的 一 半 。 如 果 最 左边 的 剩余 空间 是 负数 ， 或 该 行 只 有 一 个 伸缩 盒 项 目 ， 则 该 值 等 效 于 
center。 在 其 他 情况 下 ， 伸 缩 盒 项 目 平均 分 布 ， 并 确保 两 两 之 间 的 空白 空间 相等 ， 同 时 第 
一 个 元 素 前 的 空间 以 及 最 后 一 个 元 素 后 的 空间 为 其 他 空白 空间 的 一 半 。 

【 例 12-8] 

创建 静态 的 HIML 网 页 ， 页 面 的 部 分 代码 如 下 : 


<ul id="box" class="box"> 
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li> 
</ul> 


为 网 页 中 的 页 面 元 素 添加 以 下 样式 : 


.box{ 

display:-webkit-flex;display:flex; 

‘width:800px;height:100px;margin:0;padding:0;border-radius:5px;list-style:none;background-color:#eee;} 
.box li{margin:5px;padding:10px;border-radius:5px;background:#aaa;text-align:center;} 
#box{-webkit-justify-content:flex-start;justify-content:flex-start;} 
#box2{-webkit-justify-content:flex-end;justify-content:flex-end;} 
#box3{-webkit-justify-content:center;justify-content:center;} 
#box4{-webkit-justify-content:space-between;justify-content:space-between;} 
#box5{-webkit-justify-content:space-around;justify-content:space-around;} 


运行 上 述 样 式 代 码 ， 具 体 效 果 如 一 一 一 忆 
12-8 所 示 。 © [© Rie/Frat Tes morstly content htm 


justify-content:flex-start 


justify-contentflex-end 


ISO (人 


justify-content:center 


justify-content:space-between 


justify-content:space-around 


图 12-8 justify-content 属性 效果 
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第 12 章 CSS3 新 增 的 高 级 属性 
一 一 一 一 
咱 ) 12.2.5 ”其 他 属性 简 述 
本 小 节 针对 其 他 有 关 的 弹性 盒 模型 进行 说 明 。 
iexfow 属性 


flex-flow 属性 用 于 设置 或 检索 弹性 盒 模 型 对 象 的 子 元 素 排 列 方式 。 该 属性 是 一 个 复合 属 
性 ， 基 本 语法 如 下 : 


flex-flow:<flex-direction > | | < flex-wrap > 


h，<flex-direction> 定义 弹性 盒子 元 素 的 排列 方向 ，<flex-wrap> 控制 flex 容器 为 单行 


或 者 多 行 。 
align-items 属性 


align-items 属性 定义 flex 子 项 在 flex 容器 中 当前 行 的 侧 轴 《〈 纵 轴 ) 方向 上 的 对 齐 方式 。 
基本 语法 如 下 : 


align-items:flex-start | flex-end | center | baseline | stretch 


针对 上 述 align-items 属性 的 取 值 ， 具 体 说 明 如 下 。 


flex-start ”弹性 盒子 元 素 的 侧 轴 ( 纵 轴 ) 起 始 位 置 的 边界 紧 靠 该 行 的 侧 轴 起 始 边界 。 
flex-end ”弹性 盒子 元 素 的 侧 轴 ( 纵 轴 ) 结束 位 置 的 边界 紧 靠 该 行 的 侧 轴 结 束 边 界 。 
center ”弹性 盒子 元 素 在 该 行 的 侧 轴 ( 纵 轴 ) 上 居中 放置 。 如 果 该 行 的 尺寸 小 于 弹性 盒 
子 元 素 的 尺寸 ， 则 会 向 两 个 方向 溢出 相同 的 长 度 。 

baseline ”如 弹性 盒子 元 素 的 行内 轴 与 侧 轴 为 同一 条 ， 则 该 值 与 flex-start 等 效 。 其 他 情 
况 下 ， 该 值 将 参与 基线 对 齐 。 

stretch ”如 果 指 定 侧 轴 大 小 的 属性 值 为 aato， 则 其 值 会 使 项 目的 边 距 盒 的 尺寸 尽 可 能 接 
近 所 在 行 的 尺寸 ， 但 同时 会 遵照 min/max-width/height 属性 的 限制 。 


区 align-content 属性 


当 伸缩 容器 的 侧 轴 还 有 多 余 空 间 时 ，align-content 属性 可 以 用 来 调 准 伸缩 行 在 伸缩 容器 
里 的 对 齐 方式 ， 这 与 调 准 伸缩 项 目 在 主轴 上 对 齐 方式 的 justify-content 属性 类 似 。 需 要 注意 的 
是 ，align-content 属性 在 只 有 一 行 的 伸缩 容器 上 没有 效果 。 


align-content:flex-start | flex-end | center | space-between | space-around | stretch 


针对 align-content 属性 的 取 值 ， 具 体 说 明 如 下 。 


flex-start 各行 向 弹性 盒 容器 的 起 始 位 置 堆 晋 。 弹 性 盒 容器 中 第 一 行 侧 轴 的 起 始 边 界 紧 
靠 该 弹性 盒 容器 侧 轴 的 起 始 边 界 ， 之 后 的 每 一 行 都 紧 靠 前 面 一 行 。 

flex-end 各 行 向 弹性 盒 容器 的 结束 位 置 堆 者 。 弹 性 盒 容器 中 最 后 一 行 侧 轴 的 结束 边界 紧 
靠 该 弹性 盒 容器 侧 轴 的 结束 边界 ， 之 后 的 每 一 行 都 紧 靠 前 面 一 行 。 

center 各行 向 弹性 盒 容 器 的 中 间 位 置 堆 亚 。 各 行 两 两 紧 靠 同时 在 弹性 盒 容器 中 居中 对 
齐 ， 保 持 弹性 盒 容器 侧 轴 的 起 始 内 容 边 界 和 第 一 行 之 间 的 距离 与 该 容器 侧 轴 的 结束 内 容 
边界 与 最 后 一 行 之 间 的 距离 相等 。 如 果 剩 下 的 空间 是 负数 ， 则 各 行 会 向 两 个 方向 溢出 相 
等 的 距离 。 

space-between 各行 在 弹性 盒 容器 中 平均 分 布 。 如 果 剩 余 的 空间 是 负数 或 弹性 盒 容 器 
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中 只 有 一 行 ， 则 该 值 等 效 于 flex-start。 


在 其 他 情况 下 ， 第 一 行 侧 轴 的 起 始 边 : 
盒 容器 侧 轴 的 起 始 内 容 边 ; 
界 ， 最 后 一 行 侧 轴 的 结束 边界 紧 靠 弹 

盒 容器 侧 轴 的 结束 内 容 边界 ， 剩 余 ; 
的 行 则 按 一 定 方式 在 弹性 盒 窗口 中 排 ; 


界 紧 靠 弹 | 


列 ， 以 保持 两 两 之 间 的 空间 相等 。 


。 space-around 各行 在 弹性 盒 容器 中 ， 
平均 分 布 ， 两 端 保留 子 元 素 与 子 元 素 ， 
之 间 间 距 大 小 的 一 半 。 如 果 剩余 的 空 


间 是 负数 或 弹性 盒 容 器 中 只 


该 什 等 效 于 center。 在 其 他 情况 下 , 各 
盒 容器 中 排列 ， 
以 保持 两 两 之 间 的 空间 相等 ， 同 时 第 
一 行 前 面 及 最 后 一 行 后 面 的 空间 是 其 


行 会 按 一 定 方式 在 弹 | 


他 空间 的 一 半 。 


e stretch 各 行将 会 伸展 以 占用 剩余 的 : 
空间 。 如 果 剩余 的 空间 是 负数 ， 该 值 ; 
等 效 于 flex-start。 在 其 他 情况 下 ， 剩 余 | 

以 扩大 它们 的 侧 ; 1 

Le 
| 面 代 三 : 


align-self 属性 定义 flex 子 项 单独 在 侧 轴 ， 


空间 被 所 有 行 平分 ， 
轴 尺 寸 。 


区 align-self 属性 


〈 纵 轴 ) 方向 上 的 对 齐 方式 。 基 本 语法 如 下 : 


align-self:auto | flex-start | flex-end | center | 
baseline | stretch 


如 下 。 


值 为 stretch 。 
e@ flex-start 弹性 盒子 元 素 的 侧 轴 ( 纵 


起 始 边界 。 


。 flex-end 弹性 盒子 元 素 的 侈 轴 ( 纵 轴 ) 


起 始 位 置 的 边界 紧 靠 该 行 侧 轴 的 结束 : 
边界 。 


ecenter “弹性 盒子 元 素 在 该 行 的 侧 轴 ， | 
( 纵 轴 ) 上 居中 放置 。 如 果 该 行 的 尺 ， 
十 小 于 弹性 盒子 元 素 的 尺寸 ， 则 会 向 | 


两 个 方向 溢出 相同 的 长 度 。 


关于 align-self 属性 的 取 值 ， 具 体 说 明 ， 


。 auto ”计算 值 为 元 素 的 父 元 素 的 align- | 
items 值 ， 如 果 没 有 父 元 素 ， 则 其 计算 ， 


之 上 。 
轴 ) 起 始 位 置 的 边界 紧 靠 该 行 侧 轴 的 | 


ee baseline 如 果 弹 性 盒子 元 素 的 行内 


轴 与 侧 轴 为 同一 条 ， 则 该 值 与 Hex-start 
等 效 。 其 他 情况 下 ， 该 值 将 参与 基线 
对 齐 。 


e stretch ”如果 指定 侧 轴 大 小 的 属性 值 
为 auto， 则 其 值 会 使 项 目的 边 距 盒 的 
尺寸 尽 可 能 接近 所 在 行 的 尺寸 ， 但 同 
时 会 遵照 min/max-width/height 属性 的 
限制 。 


攻 order 属性 


order 属性 设置 或 检索 弹性 盒 模型 对 象 的 
子 元 素 出 现 的 顺序 。 基 本 语法 如 下 : 


order:<integer> 

其 中 ，<integer> 用 整数 值 来 定义 排列 顺 
序 ， 数 值 小 的 排 在 前 面 ， 可 以 为 负 值 。 

【 例 12-9] 

开发 者 在 定义 order 属 性 值 时 ， 其 属性 


会 影响 <'position> 值 为 static 元 素 的 层 圭 
数值 小 的 会 被 数值 大 的 盖 住 。 例 如 下 


<style> 
‘test { display: flex;} 
.item2 { order: -1;margin: -30px;} 
</style> 
<div class="test"> 
<p class="item1">flex item1</p> 
<p class="item2">flex item2</p> 
</div> 


运行 上 述 代 码 ，iteml 将 会 盖 在 item2 


二 fiex-grow 属性 

flex-grow 属性 设置 或 检索 弹性 盒 的 扩展 
比率 。 根 据 弹性 盒子 元 素 所 设置 的 扩展 因子 
| 作为 比率 来 分 配 剩余 空 s 间 。 基 本 语法 如 下 : 


flex-grow:<number> 


【 例 12-10】 
以 下 代码 演示 flex-grow 属性 的 用 法 。 
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<style> 

.flex{display:flex;width:600px;margin:0;padding 
:Q;list-style:none;} 

.flex li:nth-child(1){width:200px;} 

.flex li:nth-child(2){flex-grow:1;width:50px;} 

.flex li:nth-child(3){flex-grow:3;width:50px;} 

</style> 


<ul class="flex"> 


<li>a</li> 
<li>b</li> 
<li>c</li> 
</ul> 
默认 情况 下 , flex-grow 属性 的 取 值 为 0， 
如 果 没 有 显示 定义 该 属性 ， 是 不 会 拥有 分 配 : 


剩余 空间 权利 的 。 


在 本 例子 中 , b 和 < 两 项 都 显 式 定义 | 
”器 定义 为 400px， 子 项 被 定义 为 200px， 相 加 
其 中 b 占 1 份 , c 占 3 分 ， 即 1:3。flex 容器 | 
: 的 200px 需要 被 4、b、c 消化 ， 通 过 收缩 因 
; 子 ， 所 以 加 权 综合 可 得 200*1+200*1+200*3= 
1000px。 


flex-grow 属性 , ex 容器 的 剩余 空间 分 成 4 份 ， 


的 剩余 空间 长 度 计 算 如 下 : 


600-200-50-50=300px 


因此 ，a、b、c 的 最 终 长 度 如 下 : 


a: 50+(300/4)=200px 
b: 50+(300/4*1)=125px 
c: 50+(300/4*3)=275px 


三 ex-shrink 属性 


flex-shrink 属性 设置 或 检索 弹性 盒 的 收缩 | 


比率 。 语 法 如 下 : 


flex-shrink:<number> 


比率 ， 不 允许 为 负 值 。 
【 例 12-11]】 
以 下 代码 演示 了 flex-shrinkk 属 性 的 用 法 。 


<style> 

.flex{display:flex;width:400px;margin:0;padding 
:0;list-style:none;} 

flex li{width:200px;} 


; 量 是 


-flex li:nth-child(3){flex-shrink:3;} 
</style> 

<ul class="flex"> 

<li>a</li> 

<li>b</li> 

<li>c</li> 

</ul> 


默认 情况 下 ，flex-shrink 属性 的 值 为 1， 


， 如 果 没有 显示 定义 该 属性 ， 将 会 自动 按照 黑 
， 认 值 1 在 所 有 因子 相 加 之 后 计算 比率 来 进行 
.空间 收缩。 


在 本 例 中 ，c 显 式 定义 flex-shrink 属性 ， 


a 和 b 没 有 显 式 定义 ， 但 将 根据 默认 值 1 来 


计算 ， 此 时 ， 可 以 知道 总 共 将 剩余 空间 分 成 


| 了 5 份 ， 其 中 a 占 1 份 , b 占 1 份 c 占 3 


分 ， 即 1:1:3。 从 上 述 代码 中 可 以 看 到 父 容 


之 后 即 为 600px， 超 出 父 容器 200px。 超 出 


于 是 可 以 计算 a、b、c 将 被 移 除 的 溢出 
少 。 计 算 内 容 如 下 : 


a 被 移 除 溢出 量 : (200*1/1000)*200， 即 约 等 
于 40px 

b 被 移 除 溢出 量 : (200*1/1000)*200， 即 约 等 
于 40px 

c 被 移 除 溢出 量 : (200*3/1000)*200， 即 约 等 
于 120px 


最 后 a、b、c 的 实际 宽度 分 别 为 : 200 一 


| 40=160px, 200 — 40=160px, 200 一 120=80px。 
其 中 ，<number> 表示 用 数值 来 定义 收缩 


三 ex 属性 


flex 属性 是 一 个 复合 属性 ， 用 于 设置 或 


检索 弹性 盒 模型 对 象 的 子 元 素 如 何 分 配 空间 。 


flex:none | < flex-grow'>< flex-shrink >? || < 


flex-basis'> 


关于 flex 属性 的 取 值 说 明 如 下 。 
®@ ”none none 关键 字 的 计算 值 为 00auto。 
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。 <flex-grow> ”用 来 指定 扩展 比率 ， 即 剩余 空间 是 正 值 时 ， 此 flex 子 项 相对 于 flex 容器 里 
其 他 flex 子 项 能 分 配 到 的 空间 比例 。 在 flex 属性 中 ， 该 值 如 果 被 省 略 则 默认 为 0。 
。 <flex-shrink> ”用 来 指定 收缩 比率 ， 即 剩余 空间 是 负 值 时 ， 此 flex 子 项 相对 于 flex 容器 
里 其 他 flex 子 项 能 收缩 的 空间 比例 。 在 收缩 的 时 候 收缩 比率 会 以 伸缩 基准 值 加 权 ， 在 flex 
属性 中 ， 该 值 如 果 被 省 略 则 默认 为 1。 
。 <flex-basis> 用 来 指定 伸缩 基准 值 ， 即 在 根据 伸缩 比率 计算 出 剩余 空间 的 分 布 之 前 ， 
flex 子 项 长 度 的 起 始 数值 。 在 flex 属性 中 ， 该 值 如 果 被 省 略 则 默认 为 0%。 在 flex 属性 中 
该 值 如 果 被 指定 为 auto， 则 伸缩 基准 值 的 计算 值 是 自身 设置 的 宽度 ， 如 果 自 身 的 宽度 没 
有 定义 ， 则 长 度 取决 于 内 容 。 
II 提示 ee 


如 果 缩 写 flex:1, 则 其 计算 值 为 1 1 0%; 如 果 缩写 flex: auto, 则 其 计算 值 为 1 1 auto; 如 果 是 flex: 
| none, 则 其 计算 值 为 00auto， 如 果 是 flex: 0 auto 或 者 flex: initial, 则 其 计算 值 为 01auto， 即 flex 初始 值 。 ) 


咱 》12.2.6 ”实践 案例 : 用 flex 盒 模 型 实现 三 栏 布局 


flex 盒 模型 的 功能 非常 强大 ， 当 flex 的 相关 属性 支持 所 有 的 浏览 器 时 ， 由 于 它 比 浮动 布 
局 更 加 简单 和 强大 ， 将 彻底 改变 我 们 的 CSS 布局 方式 。 例 如 ， 可 以 很 容易 地 写 出 一 个 元 素 在 
未 知 比例 下 的 居中 对 齐 布局 。 当 然 CSS3 新 增 的 其 他 属性 ， 例 如 grid 也 可 以 给 前 端 开 发 带 来 
更 多 的 布局 方式 。 


三 栏 布局 在 网 页 中 非常 A ~ | 
常见 ， 又 被 称 为 圣杯 布局 。 页 © [© fiey//DyFirstTest/work/three html 女 | : 
面 从 上 到 下 ， 分 成 三 个 部 分 : 

头 部 (header)、 躯 干 (body) Aside 1 (人 EE1) 


和 尾部 〈footer) 。 躯 干 又 被 
水 平分 成 三 栏 ， 从 左 到 右 为 导 
航 、 主 栏 和 副 栏 。 本 节 实 践 案 
例 主 要 利用 flex 的 相关 属性 实 
现 简单 的 三 栏 布 局 ， 最 终 效果 
如 图 12-9 所 示 。 12-9 实现 三 栏 结构 布局 


根据 图 12-9 所 示 的 效果 进行 设计 ， 相 关 的 静态 页 面 代码 如 下 : 
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<div class="wrapper"> 
<header class="header">Header ( 头 部 ) </header> 
<article class="main "> 
<p>Flexbox 布局 〈Flexible Box) 模块 虽 在 提供 一 个 更 佳 有 效 的 布局 方式 ， 更 好 地 控制 项 目 
的 对 齐 和 自由 分 配 容器 空间 ， 即 使 它们 的 大 小 是 未 知 的 或 动态 的 。 因 此 得 其 名 flex。</p> 
</article> 
<aside class="aside aside-1">Aside 1( 侧 栏 1) </aside> 
<aside class="aside aside-2">Aside 2( 侧 栏 2) </aside> 
<footer class="footer">Footer (底部 内 容 ) </footer> 


</div> 
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为 上 述 页面 中 的 元 素 添加 CSS 样式 代码 ， 主 要 利用 flex-flow 属性 、order 属性 和 flex 属 
性 进行 设计 。 代 码 内 容 如 下 : 


.wrapper{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit- 
flex-flow:row wrap;font-weight:bold;text-align:center} 

.wrapper > *{padding:10px;flex:1 100%} 
.header{background:tomato} 
.footer{background:lightgreen} 
.main{text-align:left;background:deepskyblue} 
.aside-1{background:gold} 
.aside-2{background:hotpink} 
@media all and (min-width:600px){.aside{flex:1 auto}} 
@media all and (min-width:800px){ 

.main{flex:2 Opx} 

.aside-1{order:1} 

.main{order:2} 


.aside-2{order:3} 
.footer{order:4} 
} 
</style> 


运行 静态 页 面 ， 具 体 效 
果 如 图 12-9 所 示 。 该 例子 @ [© file///DY/FirstTestwork/three.html 
的 代码 具有 自动 适应 性 ， 如 
果 是 在 移动 客户 端 ， 那 么 三 
栏 布局 的 格式 会 有 所 改变 ， 
如 图 12-10 所 示 。 
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Aside 1 ( 侧 栏 1 ) 


图 12-10 自 适 应 的 三 栏 布局 


7) 12.3 ”渐变 属性 


从 早期 的 设计 可 以 知道 ， 渐 变 是 两 种 或 者 两 种 以 上 颜色 的 平滑 过 渡 。 渐 变 背景 在 Web 页 
面 中 是 一 种 常见 的 视觉 元 素 。 一 直 以 来 ，Web 设计 师 都 是 通过 图 形 软件 设计 这 些 渐变 效果 ， 
然后 以 图 片 形式 或 者 背景 图 片 的 形式 运用 到 页 面 中 。Web 页 面 上 实现 的 效果 ， 仅 从 页 面 的 视 
觉 效 果 上 来 看 ， 与 软件 设计 并 无 任何 差异 。 

随 着 CSS 的 发 展 ，W3C 组 织 将 渐变 设计 收入 CSS3 标准 中 ， 让 广大 的 前 端 设 计 师 直接 受 
益 ， 可 以 直接 通过 渐变 属性 制作 类 似 渐 变 图 片 的 效果 。 渐 变 属 性 慢 慢 得 到 了 众多 现代 浏览 
的 兼容 ， 甚 至 连 兼容 性 较 差 的 正 浏览 器 ， 其 正 10 版 本 也 支持 这 个 属性 。 
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咱 》12.3.1 线性 渐变 


在 线性 渐变 过 程 中 ， 颜 色 沿 着 一 条 直线 过 渡 ， 从 左 侧 到 右 侧 、 从 右 侧 到 左 侧 、 从 顶 
部 到 底部 、 从 底部 到 顶部 或 者 沿 任意 轴 变 化 。 如 果 设 计 人 员 曾 经 使 用 过 制图 软件 〈 例 如 
Photoshop) ， 那 么 对 于 线性 渐变 会 非常 熟悉 。 

用 CSS3 制作 渐变 效果 ， 其 实 和 使 用 制图 软件 中 的 渐变 工具 没有 什么 差别 ， 都 需要 指定 
渐变 的 方向 、 渐 变 的 起 始 颜色 和 渐变 的 结束 颜色 。 具 有 这 3 个 参数 就 可 以 制作 一 个 最 简单 、 
最 普通 的 渐变 效果 。 如 果 需 要 制作 复杂 的 多 色 渐变 效果 ， 就 需要 在 同一 个 渐变 方向 增添 多 个 
色 标 。 具备 这 些 渐变 参数 (至 少 3 个 ) 各 浏览 器 就 会 绘制 与 渐变 线 垂直 的 颜色 来 填充 整个 容器 。 
浏览 器 泻 染 出 来 的 效果 类 似 于 软件 设计 出 来 的 渐变 图 像 ， 即 沿 所 指 的 线性 渐变 方向 实现 颜色 
渐变 效果 。 

线性 渐变 的 语法 相对 于 其 他 CSS3 属性 的 语法 而 言 要 复杂 得 多 。 早 期 CSS 版 本 的 语法 在 
各 浏览 器 内 核 下 不 尽 相同 ， 特 别 是 在 Webkit 内 核 之 下 还 分 新 旧 两 种 版 本 。 下 面 我 们 从 各 浏览 
器 下 的 语法 入 手 ， 介 绍 CSS3 的 线性 渐变 语法 。 

伍 webkit 引擎 的 线性 渐变 语法 与 属性 参数 

Webkit 是 第 一 个 支持 CSS3 渐变 的 浏览 器 引擎 ， 不 过 其 语法 比 其 他 浏览 器 引擎 复杂 ， 还 
分 为 新 旧 两 个 版 本 。 

在 旧版 本 中 ， 线 性 渐变 的 语法 如 下 


-webkit-gradient(type,x1 y1,x2 y2,form(color value),to(color value), [color-stop()*]) 


关于 -webkit-gradient() 方法 的 参数 说 明 如 下 。 

e@ type 表示 渐变 的 类 型 ， 包 括 线性 渐变 ( linear ) 和 径 向 渐变 ( radial ) 。 

@ Xx1y1 和 x2y2 表示 颜色 渐变 两 个 点 的 坐标 。x1、y1、x2 和 y2 的 取 值 范围 为 0%~100%， 
当 它们 取 极 值 的 时 候 ，xl 和 x2 可 以 取 值 left( 或 0%) 或 right(100%0)，yl 和 y2 可 以 取 值 
top(0%) 或 bottom( 或 100%)。 

@ form(color value) 表示 渐变 开始 的 颜色 值 。 

@ to(color value) ”表示 渐变 结束 的 颜色 值 。 

e@ color-stop() ”定义 颜色 步 长 。color-stop() 函数 包含 两 个 参数 ， 第 一 个 参数 指定 色 标 位 置 ， 
可 以 是 数值 或 百分比 , 取 值 范围 为 0-10( 或 者 0%~100% ), 第 二 个 参数 指定 任意 的 颜色 值 。 
一 个 渐变 可 以 包含 多 个 色 标 。 

另外 ， 关 于 参数 xl1 yl 和 x2 y2， 需 要 考虑 以 下 4 种 情况 。 

@ 如 果 xl 等 于 x2, yl 不 等 于 y2, 实现 径 向 渐变 , 调整 y1 和 y2 的 值 可 以 调整 渐变 半径 的 大 小 。 

@ 如 果 yl 等 于 y2，xl 不 等 于 x2， 实 现 线性 渐变 ， 调 整 xl 和 x2 的 值 可 以 调整 渐变 
步 长 的 大 小 。 

@ 如 果 yl 不 等 于 y2，xl 不 等 于 x2， 实 现 角度 渐变 ( 可 以 是 线性 渐变 或 径 向 渐变 ) ， 当 
xl、x2、yl 和 y2 取 值 为 极 值 的 时 候 接近 径 向 渐变 或 水 平 渐变 。 

®@ 如 果 xl 等 于 x2，yl 等 于 办 ， 没 有 渐变 ， 取 函数 form0 的 颜色 值 。 

在 新 版 本 中 ， 线 性 渐变 的 语法 如 下 : 


-webkit-linear-gradient( [<point> | | <angle>,]? <stop>, <stop> [, <stop>]* ); 


此 种 语法 经 常 被 用 到 , 它 通常 需要 传 入 3 个 或 者 更 多 的 参数 , 第 一 个 参数 指定 渐变 的 角度 ， 
即 top 是 从 上 到 下 、let 是 从 左 到 右 ， 如 果 定义 成 left top， 则 表示 从 左上 角 到 右 下 角 ; 第 二 个 


1dUoSeAer+SsSSI+S1WNLH 人 


男 316 


第 12 章 CSS3 新 增 的 高 级 属性 


1 


参数 和 第 三 个 参数 分 别 是 起 点 颜色 和 终点 颜色 ， 还 可 以 在 它们 之 间 插 入 多 个 参数 ， 表 示 多 种 
颜色 的 渐变 。 

起 下 其 他 浏览 器 的 语法 说 明 

在 Gecko 和 Presto 泻 染 引 擎 中 , 设计 人 员 仍然 需要 为 其 指定 私有 属性 , 前 者 需要 添加 -moz- 
前 级 ， 后 者 需要 添加 -o- 前 级 。 语 法 如 下 : 


-moz-linear-gradient( [<point> | | <angle>,]? <stop>, <stop> [, <stop>]* ); //Gecko 引擎 
-O-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ); //Presto 引擎 


从 上 述 语 法 中 可 以 看 出 ， 除 了 前 缀 不 同 ， 实 际 上 它们 的 语法 都 与 Webkit 引擎 的 新 版 本 语 
法 一 致 ， 因 此 ， 这 里 不 再 详细 解释 它们 的 参数 。 

展业 线性 渐变 的 常见 应 用 

在 实际 网 页 应 用 中 ， 线 性 渐变 会 经 常用 到 ， 例 如 颜色 从 底部 向 顶部 渐变 、 从 项 部 向 底部 
渐变 、 从 左 向 右 渐 变 、 从 右 向 左 渐变 等 。 

【 例 12-12]】 

制作 从 底部 到 项 部 直线 渐变 最 简单 的 方法 是 直接 使 用 to top 关键 词 ， 表 示 第 一 颜色 向 第 
二 颜色 渐变 。 要 实现 类 似 于 to top 的 效果 还 可 以 使 用 角度 值 0deg、360deg 和 一 360deg。 样 式 
代码 如 下 : 


div{ 

width: 400px; height: 150px; border: 1px solid #666; line-height: 150px; text-align: center; font-weight: 
900; font-size: 30px; color: #fff; margin: 10px auto; 

} 

‘toTop { 
background-image:-webkit-linear-gradient(to top, orange, green); 
background-image:linear-gradient(to top,orange,green); 

| 

.toTop-deg{ 
background-image:-webkit-linear-gradient(0deg, orange, green); 
background-image:linear-gradient(0deg,orange,green); 

} 

‘toTop-deg2{ 
background-image:-webkit-linear-gradient(360deg, orange, green); 
background-image:linear-gradient(360deg,orange,green); 

} 

.toTop-deg3{ 
background-image:-webkit-linear-gradient(-360deg, orange, green); 
background-image:linear-gradient(-360deg,orange,green); 


} 


【 例 12-13]】 
to top 实现 颜色 从 底部 向 顶部 渐变 ， 而 关键 词 to bottom 刚好 与 to top 实现 的 效果 相反 ， 
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可 以 实现 从 项 部 到 底部 的 渐变 效果 。 实 现 从 顶部 向 底部 渐变 也 可 以 使 用 角度 值 180deg 和 


一 180deg。 样 式 代 码 如 下 : 


.toBottom { 
background-image:-webkit-linear-gradient(to bottom, orange, green); 
background-image:linear-gradient(to bottom,orange,green); 

} 

.toBottom-deg{ 
background-image:-webkit-linear-gradient(180deg, orange, green); 
background-image:linear-gradient(180deg,orange,green); 

} 

.toBottom-deg2{ 
background-image:-webkit-linear-gradient(-180deg, orange, green); 
background-image:linear-gradient(-180deg,orange,green); 


} 


【 例 12-14]】 


to left 关键 词 实现 从 右 向 左 颜 色 渐变 ， 实 现 第 一 颜色 从 右 向 左 到 第 二 颜色 的 渐变 。to left 


实现 的 效果 也 可 以 使 用 角度 值 90deg 和 270deg。 样 式 代码 如 下 : 


‘toLeft { 
background-image:-webkit-linear-gradient(to left, orange, green); 
background-image:linear-gradient(to left,orange,green); 
‘toLeft-deg{ 
background-image:-webkit-linear-gradient(-90deg, orange, green); 
background-image:linear-gradient(-90deg,orange,green); 
} 
.toLeft-deg2{ 
background-image:-webkit-linear-gradient(270deg, orange, green); 


background-image:linear-gradient(270deg,orange,green); 


【 例 12-15】 


to right 实现 的 效果 正好 与 to left 相反 ， 即 颜色 从 左 向 右 直线 渐变 ， 这 种 效果 也 可 以 使 


角度 值 90deg 和 一 270deg 来 实现 。 样 式 代 码 如 下 : 


.toRight { 
background-image:-webkit-linear-gradient(to right, orange, green); 
background-image:linear-gradient(to right,orange,green); 

} 

.toRight-deg{ 


background-image:-webkit-linear-gradient(90deg, orange, green); 
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background-image:linear-gradient(90deg,orange,green); 

} 

.toRight-deg2{ 
background-image:-webkit-linear-gradient(-270deg, orange, green); 
background-image:linear-gradient(-270deg,orange,green); 


} 


使 用 关键 词 实现 的 线性 渐变 效果 可 以 从 关键 词 的 方向 性 来 定 ， 除 了 可 以 使 用 to top、to 
bottom、to right、to left 关键 字 外 ， 其 他 常用 的 关键 字 及 其 说 明 如 表 12-3 所 示 。 
表 12-3 ”线性 渐变 常用 的 关键 字 


关键 字 说 明 
| eepes 颜色 从 右 下 角 向 左上 角 线 性 渐变 | 
| to top right | 商 色 从 霸 下 角 向 右上 角 线 性 渐变 | 
| io bottom Ieft | 颜色 从 右上 角 向 在 下 角 线 性 渐变 | 
to bottom right 颜色 从 左上 角 向 右 下 角 线 性 渐变 
【 例 12-16]】 


前 面 的 例子 仅仅 只 演示 了 两 种 颜色 的 线性 渐变 , 实际 上 , 可 以 实现 多 种 颜色 的 渐变 。 例 如 ， 
网 页 中 某 一 部 分 的 背景 渐变 ， 具 体 步 骤 如 下 。 
四 下 创建 HIML 静态 页 面 ， 在 页 面 中 添加 一 个 div 元 素 。 


<div class="test"></div> 


因 久 为 div 元 素 添 加 样式 代码 : 
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,test{ 

width:600px; height:300px; 
background:-webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); 
background:-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); 
background:-moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); 
background:linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 


} 
大 吕 运行 HTML 页 面 ， 具 体 效果 图 不 再 给 出 。 


叫 )》 12.3.2 径 向 渐变 


径 向 渐变 是 指 从 起 点 到 终点 、 颜 色 从 内 到 外 进行 圆 形 渐变 “从 中 间 向 外 拉 )。 在 Webkit 
引擎 中 ， 径 向 渐变 有 两 种 语法 ， 旧 版 本 的 语法 如 下 : 


-webkit-gradient(type,x1 y1,x2 y2,form(color value),to(color value),[color-stop()*]) 


将 type 的 值 设置 为 radial 时 表示 绘制 径 向 渐变 ， 其 他 参数 不 再 做 具体 说 明 ， 可 以 参考 线 
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在 新 版 本 的 语法 中 ， 通 过 -webkit-radial-gradient() 绘制 径 向 渐变 。 语 法 如 下 : 


-webkit-radial-gradient( [<point> || <angle>, ]? [<shape> | | <size>,] ? <start stop>,<end stop>[,<stop>]* ) 


关于 上 述 语法 中 的 参数 ， 具 体 说 明 如 下 。 

e point 表示 渐变 的 起 点 和 终点 ， 可 以 使 用 坐标 表示 ， 也 可 以 使 用 关键 字 ， 例 如 ( 0.0 ) 或 
者 (lefttop ) 等 。 

e@ angle 定义 渐变 的 角度 ， 主 要 包括 deg ( 度 ， 一 圈 等 于 360deg )、grad ( 梯度 ，90 度 等 
于 100grad ) 、rad ( 弧度 ， 一 圈 等 于 2*PI rad ) ; 默认 为 0deg。 

@ shape 定义 径 向 渐变 的 形状 ， 包 括 circle ( 圆 ) 和 ellipse ( 椭圆 ) ， 默 认为 ellipse。 

@ size 用 来 定义 圆 或 椭圆 大 小 的 点 ， 其 值 主要 包括 closest-side、closest-corner、farthest- 
side、farthest-corner、contain 和 cover 等 。 

e start stop ”定义 颜色 起 始 值 。 

e@ end stop 定义 颜色 结束 值 。 

@ stop 定义 步 长 ， 可 以 省 略 。 其 用 法 和 上 一 节 介 绍 的 在 Webkit 引擎 的 color-stop() 函数 相 
似 ， 但 是 该 参数 不 需要 调用 函数 ， 直 接 传递 参数 即 可 。 第 一 个 参数 设置 颜色 ， 可 以 为 任 
何 合法 的 颜色 值 ， 第 二 个 参数 设置 颜色 的 位 置 ， 取 值 为 百分比 或 数值 。 


ee 
1 哈 - 提示 
在 Gecko 和 Presto 洽 染 引擎 中 ， 设 计 人 员 可 以 使 用 Iadial-gradient(0) 绘制 径 向 渐变 ， 但 是 需要 
| 为 其 指定 私有 属性 ， 前 者 需要 添加 -moz- 前 级 ， 后 痢 需 要 添加 -0- 前 级 。 j 
【 例 12-17] 


对 于 径 向 渐变 ， 在 不 指定 渐变 类 型 以 及 位 置 的 情况 下 ， 其 渐变 距离 和 位 置 是 由 容器 的 尺 
十 决定 的 。 在 本 例 中 ， 指 定 div 元 素 的 宽度 和 高 度 ， 背 景 颜色 实现 从 黄色 到 红色 的 渐变 。 容 
器 的 宽 高 比 是 2 : 1， 最 终 渐变 呈现 出 来 的 形状 也 是 一 个 2 : 1 的 椭圆 形 ， 并 且 渐 变 颜色 自动 终 
止 于 容器 的 边缘 。 具 体 的 样式 代码 如 下 
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.radial-gradient { 
width: 400px; height: 200px; 
background: -webkit-radial-gradient(yellow, red); 
background: -moz-radial-gradient(yellow, red); 
background: -o-radial-gradient(yellow, red); 
background: radial-gradient(yellow, red); 
} 


运行 上 述 代码 可 以 发 现 ， 上 述 代 码 实现 的 是 椭圆 形 渐变 ， 如 果 要 实现 圆 形 渐变 ， 需 要 在 
上 述 代码 的 基础 上 添加 关键 词 circle。 部 分 样式 代码 如 下 : 


.radial-gradient { 
width: 400px; height: 200px; 
background: -webkit-radial-gradient(circle,yellow, red); 
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【 例 12-18]】 

除了 可 以 使 用 关键 词 制作 不 同 的 径 向 渐变 外 ， 还 可 以 用 不 同 的 渐变 参数 制作 径 向 渐变 多 
果 。 通 过 制作 同心 圆 ， 并 设置 主要 半径 和 次 要 半径 来 决定 径 向 渐变 的 形状 。 例 如 ， 圆 心 位 置 
都 在 “200px,150px” 处 ， 主 要 半径 为 50px， 次 要 半径 为 150px， 从 hsla(120,70%,60%,.9) 色 
到 hsla(360,60%,60%,.9) 色 径 向 渐变 。 


div{ 
width: 400px; height: 300px; margin: 50px auto; border: 5px solid hsla(60,50%,80%,.8); 
background-image: -webkit-radial-gradient(50px 150px at 200px 150px, hsla(120,70%,60%,.9), 
hsla(360,60%,60%,.9)); 
background-image: radial-gradient(50px 150px at 200px 150px, hsla(120,70%,60%,.9), 
hsla(360,60%,60%,.9)); 
} 


【 例 12-19】 
在 上 个 例子 的 代码 中 ， 主 要 实现 的 是 内 径 小 于 外 径 制作 的 径 向 渐变 效果 。 以 下 代码 实现 
圆心 相同 、 内 外 半径 大 小 相同 的 渐变 效果 。 


div{ 
width: 400px; height: 300px; margin: 50px auto; border: 5px solid hsla(60,50%,80%,.8); 
background-image: -webkit-radial-gradient(200px 200px at 200px 150px,hsla(120,70%,60%,.9), 
hsla(360,60%,60%,.9)); 
background-image: radial-gradient(200px 200px at 200px 150px, hsla(120,70%,60%,.9), 
hsla(360,60%,60%,.9)); 
} 
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【 例 12-20]】 
当 内 外 圆 的 圆心 相同 ， 并 且 主 要 半径 和 次 要 半径 相等 时 ， 就 等 同 于 制作 了 一 个 
圆 形 径 向 渐变 效果 。 以 下 代码 表示 圆心 相同 、 主 要 半径 大 于 次 要 的 半径 制作 的 径 向 


div{ 
width: 400px; height: 300px; margin: 50px auto; border: 5px solid hsla(60,50%,80%,.8); 
background-image: -webkit-radial-gradient(300px 100px at 200px 150px,hsla(120,70%,60%,.9), 
hsla(360,60%,60%,.9)); 
background-image: radial-gradient(300px 100px at 200px 150px,hsla(120,70%,60%,.9), 
hsla(360,60%,60%,.9)); 
} 


【 例 12-21]】 
除了 能 实现 一 些 简 单 的 径 向 渐变 效果 之 外 ， 还 可 以 使 用 渐变 形状 配合 圆心 定位 ， 主 要 使 
“at” 加 上 关键 词 来 定义 径 向 渐变 中 心 位 置 。 
径 向 渐变 中 心 的 位 置 类 似 于 设置 background-position 属性 , 可 以 使 用 一 些 关键 词 来 定义 。 
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使 用 以 下 代码 通过 center 设置 径 向 渐变 中 心 位 置 在 容器 的 中 心 点 ， 相 当 于 at 50% 50%， 类 似 
于 background-position:center。 代 码 如 下 : 


.center .circle { 
background-image: -webkit-radial-gradient(circle at center, rgb(220, 75, 200),rgb(0, 0, 75)); 
background-image: radial-gradient(circle at center, rgb(220, 75, 200),rgb(0, 0, 75)); 

} 

.Center .ellipse { 
background-image: -webkit-radial-gradient(ellipse at center, rgb(220, 75, 200),rgb(0, 0, 75)); 
background-image: radial-gradient(ellipse at center, rgb(220, 75, 200),rgb(0, 0, 75)); 

} 


除了 center 之 外 ， 其 他 关键 字 的 说 明 如 表 12-4 所 示 。 
表 12-4 径 向 渐变 常用 的 关键 字 


了 ae 
一 
三 
Fs 
a 关键 字 说 明 
top 设置 径 向 圆心 点 在 容器 的 项 边 中 心 点 处 ， 与 at 50% 0% 的 效果 相同 
nN 。 设置 径 向 渐变 圆心 点 在 容器 右边 中 心 点 处 ， 与 at 100% 50% 的 效果 相同 。 类 似 于 
Cn Tight 
人 background-position 的 Tight center 
过 Bien 设置 径 向 渐变 圆心 点 在 容器 底 边 中 心 点 处 ， 刚 好 与 top 关键 词 位 置 相反 ， 与 at 50% 
100% 效果 等 同 。 类 似 于 background-position 中 的 center bottom 
号 jot 设置 径 向 渐变 圆心 点 在 容器 左边 中 心 点 处 ， 刚 好 与 Tight 关键 词 位 置 相反 ， 与 at 0% 
50% 效果 等 同 。 类 似 于 background-position 的 center left 
=: eS 设置 径 向 渐变 圆心 点 在 容器 的 左 角 顶点 处 ， 与 关键 词 lettop 和 at00 效果 等 后。 类似 
5S 于 background-position 的 left top 
op 设置 径 向 渐变 圆心 点 在 容器 右 角 顶 点 处 ， 与 Tight top 关键 词 和 at 100% 0 效果 等 同 。 类 
人 似 于 background-position 的 top right 
bottom 设置 径 向 渐变 的 圆心 点 在 容器 右 下 角 顶 点 处 ， 与 关键 词 ight bottom 和 at 100% 100% 
right 效果 等 同 。 类 似 于 background-position 的 bottom right 
obo er 设置 径 向 渐变 圆心 在 容器 左下 角 顶 点 处 ， 与 关键 词 left bottom 和 at 0% 100% 效果 等 同 。 
人 类 似 于 background-position 的 bottom le 人 ft 


在 径 向 渐变 中 ， 除 了 能 设置 径 向 渐变 的 圆心 位 置 、 半 径 大 小 之 外 ， 还 可 以 设置 径 向 渐变 
的 颜色 。 前 面 我 们 演示 的 都 是 简单 的 两 种 颜色 制作 的 径 向 渐变 ， 接 下 来 通过 <color-stop> 属 
性 参数 来 设置 径 向 渐变 使 用 多 种 颜色 。 

【 例 12-22]】 

使 用 以 下 代码 设计 红色 、 绿 色 和 蓝 色 的 径 向 渐变 。 


div{ 
margin: 20px auto;width: 200px; height: 200px; border-radius: 100%; 
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background-image: -wekbit-radial-gradient(red,green,blue); 
background-image: radial-gradient(red,green,blue); 
} 


【 例 12-23】 

上 述 示例 是 一 个 最 简单 的 三 色 径 向 渐变 ， 只 是 通过 设置 三 种 颜色 ， 从 容器 的 中 心 向 外 依 
次 为 红色 (red)、 绿 色 (green) 和 蓝 色 (blue) 。 除 此 之 外 ， 设 计 者 还 可 以 给 每 个 颜色 设置 具 
体 的 显示 位 置 。 


div{ 
margin: 20px auto; width: 200px; height: 200px; border-radius: 100%; 
background-image: -wekbit-radial-gradient(red 20%,green 50%,blue 80%); 
background-image: radial-gradient(red 20%,green 50%,blue 80%); 

} 


中 ) 12.3.3 重复 渐变 


线性 渐变 和 径 向 渐变 都 属于 CSS 背景 属性 中 的 背景 图 片 (background-image) 属性 。 有 
时 设计 者 希望 创建 一 种 在 一 个 元 素 的 背景 上 重复 的 渐变 “模式 ”。 在 没有 重复 渐变 的 属性 之 前 ， 
主要 通过 重复 背景 图 像 (使 用 background-repeat) 创建 线性 重复 渐变 ， 但 是 没有 创建 重复 的 
径 向 渐变 的 类 似 方式 。 

幸运 的 是 ，CSS3 提供 了 repeating-linear-gradient 和 repeating-radial-gradient 语法 ， 可 以 直 
接 实现 重复 的 渐变 效果 。 

攻 区 重复 线性 渐变 

设计 者 可 以 使 用 重复 线性 渐变 repeating-linear-gradient 属性 来 代替 线性 渐变 linear- 
gradient， 它 们 采取 相同 的 值 ， 色 标 在 两 个 方向 上 都 无 限 重复 。 使 用 百分比 设置 色 标 的 位 置 没 
有 多 大 的 意义 ， 但 使 用 像素 和 其 他 单位 ， 重 复线 性 渐变 可 以 创建 一 些 很 酷 的 效果 。 

【 例 12-24]】 

下 面 代码 表示 从 红色 (red) 开始 向 40px 处 的 绿色 (green) 渐变 ， 然 后 向 80px 处 的 橙色 
(orange) 渐变 。 由 于 是 重复 的 线性 渐变 ， 因 此 将 以 这 个 模式 从 上 向 下 重复 平 铺 。 样 式 代码 
如 下 : 
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div{ 
width: 400px; height: 300px; margin: 20px auto; 
background-image: -webkit-repeating-linear-gradient(red,green 40px, orange 80px); 
background-image: repeating-linear-gradient(red,green 40px, orange 80px); 

} 


外 重复 径 向 渐变 
设计 者 可 以 以 同样 的 方式 ， 使 用 相关 属性 来 创建 重复 的 径 向 渐变 ， 其 语法 和 radial 
gradient 类 似 ， 只 是 以 一 个 径 向 渐变 为 基础 进行 重复 渐变 。 
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【 例 12-25]】 
以 下 代码 实现 重复 径 向 渐变 。 


div{ 
width: 400px; height: 300px; margin: 20px auto; 
background-image: -webkit-radial-linear-gradient(red,green 40px, orange 80px); 
background-image: repeating-radial-gradient(red,green 40px, orange 80px); 


} 


叫 ) 12.3.4 ”实践 案例 : 用 线性 渐变 实现 图 片 闪光 划 过 的 效果 
经 常 在 网 上 听 音 乐 的 用 户 应 该 知道 ， 在 百度 音乐 上 可 以 看 到 这 么 一 个 图 片 效果 ， 当 鼠标 

移 至 图 片上 的 时 候 ， 会 有 一 道 闪光 在 图 片上 划 过 ， 效 果 挺 酷 炫 的 。 如 何 实现 这 个 效果 呢 ? 可 

以 通过 线性 渐变 。 
Ig 本 在 创建 的 静态 页 面 中 添加 以 下 元 素 。 


<p class="overimg"> 

<a><img src="images/img1.jpg"></a> 
<i class="light"></i> 

</p> 


好 为 页 面 中 的 元 素 添加 样式 ， 代 码 如 下 : 


.overimg{ 
position: relative; 
display: block; 
box-shadow: 0 0 10px #FFF; 
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} 
.light{ 
cursor:pointer; position: absolute; left: -180px; top: 0; width: 440px; height: 264px; background-image: 
-moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0)); 
background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rg 
ba(255,255,255,0)); 
transform: skewx(-25deg); 
-o-transform: skewx(-25deg); 
-moz-transform: skewx(-25deg); 
-webkit-transform: skewx(-25deg); 
} 
.Overimg:hover .light{ 
left:180px; -moz-transition:0.5s; -o-transition:0.5s; -webkit-transition:0.5s; transition:0.5s; 


} 


转运 行 HTML 静态 页 面 ， 如 图 12-11 所 示 ; 将 鼠标 放 到 图 片上 ,效果 如 图 12-12 所 示 。 
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图 12-11 初始 效果 图 12-12 悬浮 效果 


川 ) 12.3.5 ”实践 案例 用 径 向 渐变 制作 一 张 优惠 券 


向 渐变 很 常用 ， 而 且 功 能 非常 强大 ， 例 如 ， 设 计 人 员 可 以 利用 径 向 渐变 做 优惠 券 或 者 
邮票 等 。 本 节 将 用 径 向 渐变 与 其 他 样式 做 一 张 优惠 券 ， 具 体 实 现 步骤 如 下 。 

四 创建 HIML 静态 页 面 ， 在 页 面 中 添加 4 个 div 元 素 ， 每 个 div 元 素 包 含 主 券 和 副 券 
两 部 分 。 以 第 一 个 div 元 素 为 例 ， 代 码 如 下 : 


<div class="stamp stamp01"> 

<div class="par"><p>XXXXXX 折 扣 店 </p><sub class="sign"> 竺 </sub><span>50.00</span><sub> 优惠 券 
</sub><p> 订单 满 100.00 元 </p></div> 

<div class="copy"> 副 券 <p>2015-08-13<br>2016-08-13</p></div> 


<i></i> 
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</div> 
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3 分 别 为 网 页 中 的 div 元 素 添 加 样式 代码 ， 公 用 的 样式 代码 如 下 : 


.stamp {width: 387px;height: 140px;padding: 0 10px;position: relative;overflow: hidden;} 
.stamp:before {content: ";position: absolute;top:0;bottom:0;left:10px;right:10px;z-index: -1;} 


.stamp:after {content: ";position: absolute;left: 10px;top: 10px;right: 10px;bottom: 10px;box-shadow: 0 0 
20px 1px rgba(0, 0, 0, 0.5);z-index: -2;} 

.stamp i{position: absolute;left: 20%;top: 45px;height: 190px;width: 390px;background-color: 
rgba(255,255,255,.15); transform: rotate(-30deg);} 

.stamp .par{float: left;padding: 16px 15px;width: 220px;border-right:2px dashed rgba(255,255,255,.3);text- 
align: left;} 

.stamp .par p{color:#fff;} 

.stamp .par span{font-size: 50px;color:#fff;margin-right: 5px;} 

.stamp .par .sign{font-size: 34px;} 

.stamp .par sub{position: relative;top:-5px;color:rgba(255,255,255,.8);} 

.stamp .copy{display: inline-block;padding:21px 14px;width:100px;vertical-align: text-bottom;font-size: 
30px;color:rgb(255,255,255);} 

.stamp .copy p{font-size: 16px;margin-top: 15px;} 
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加 王 分 别 为 每 一 个 div 元 素 添加 样式 ， 指 定 背景 颜色 、 渐 变 颜色 等 内 容 。 以 第 一 个 div 元 
素 为 例 ， 样 式 代码 如 下 : 
.stamp01{background: #F39B00;background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 5px, #F39B00 
Spx);background-size: 15px 15px;background-position: 9px 3px;} 
.stamp01:before{background-color:#F39B00;} 


大 如 运行 静态 页 面 观察 效果 ， 如 图 12-13 


所 区 避 | O tle//DyFirstTest/work/gradient-.. 安 | 
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图 12-13 径 向 渐变 做 优惠 券 


XOO0CX 折 扣 店 


X000X 折 扣 店 
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叫 )》 12.3.6 ”实践 案例 : 用 重复 渐变 制作 记事 本 纸张 效果 


大 家 应 该 知道 什么 是 记事 本 ， 记 事 本 的 每 一 张 纸 上 都 有 横 线条 ， 左 边 有 两 条 竖 线 从 顶部 
延伸 到 底部 。 本 节 案 例 非常 简单 ， 利 用 重复 渐变 以 及 background-size 属性 来 制作 这 样 的 纸张 
效果 。 

在 本 章 的 具体 实现 代码 中 ， 不 使 用 任何 图 片 ， 只 使 用 CSS3 的 重复 渐变 在 body 中 编写 效 
果 。 代 码 如 下 : 


html,body { margin: 0; padding: 0; height: 100%;} 

body{ 
background: -webkit-repeating-linear-gradient(to top, #f9f9f9, #f9f9f9 29px, #ccc 30px); 
background: repeating-linear-gradient( to top, #f9f9f9, #f9f9f9 29px, #ccc 30px ); 
background-size: 100% 30px; 
position: relative; 


} 
body:before { 
content: ""; display: inline-block; height: 100%; width: 4px; border-left: 4px double #FCA1A1; position: 
absolute; left: 30px; 
} 
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运行 HTML 页 面 ， 最 终 效果 如 图 12-14 所 示 。 


GG |© file///D:/FirstTest/work/gradient-3.html 


图 12-14 记事 本 纸张 效果 


7) 12.4 练习 题 


一 、 填 空 题 


1 属性 用 于 设置 页 面 上 单列 显示 的 宽度 。 

2， 如 果 要 设置 页 面 对 象 显示 的 列 数 ， 可 以 使 用 属性 。 

3， 在 新 增 的 盒 模型 属性 中 ， 属性 设置 或 检索 伸缩 盒 对 象 的 子 元 素 在 父 容器 
中 的 位 置 。 

4. justify-content 属性 的 默认 取 值 是 四 

2 属性 用 设置 或 检索 弹性 盒 模型 对 象 的 子 元 素 出 现 的 顺序 。 

二 、 选 择 题 

1. column-rule 属性 是 一 个 复合 属性 ， 该 属性 的 子 属性 不 包含 

A. 用 于 设置 列 之 间 边 框 宽 度 的 column-rule-width 属性 

B. 用 于 设置 列 之 间 边框 样式 的 column-rule-style 属性 

C. 用 于 设置 列 之 间 边框 颜色 的 column-rule-color 属性 

D. 用 于 设置 列 之 间 边框 高 度 的 column-rule-height 属性 

2. flex-wrap 属性 设置 为 时 ， 表 示 flex 子 项 溢出 的 部 分 会 被 放置 到 新 行 ， 子 
项 内 部 会 发 生 断 行 

A. nowrap 

B. wrap 

C. wrap-reverse 

D. normal 

3. 下 面 关 于 渐变 的 说 明 ， 说 法 是 错误 的 。 

A. 重复 渐变 可 以 分 为 重复 线性 渐变 和 重复 径 向 渐变 , 它们 是 线性 渐变 和 径 向 渐变 的 扩展 。 

B. 线性 渐变 主要 使 用 -radial-gradient 属性 ， 径 向 渐变 主要 使 用 -linear-gradient 属性 

C. 如 果 用 户 使 用 Firefox 浏览 器 并 且 想 要 实现 线性 渐变 的 功能 ， 需 要 将 代码 书写 成 -moz- 

linear-gradient 的 形式 
D. 渐变 可 以 分 为 线性 渐变 、 径 向 渐变 和 重复 渐变 
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4. 在 定义 渐变 时 ， 需 要 通过 指定 设置 颜色 步 长 。 
A. from 

B. to 

C. color-stop() 

D. width 


YX 上 机 练习 1: 实现 多 列 布局 表单 


示 。 图 中 的 按钮 实现 渐变 效果 。 


la]JlsI 曙 [J 
D 多 行 布局 未 单 * EY 


GC | © file///DYFirstTest/work/workl.html 妇 | 3 


多 行 布局 表单 


Your Name: | 
Your Email: [ 
YourWebsite: | 
Your Comment: 


12-15 多 列 布局 表单 


< 上 机 练习 2: 设计 不 等 高 的 多 列 布局 效果 
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的 多 列 布局 效果 ， 最 终 效果 如 图 12-16 所 示 。 


LEJISIST 要 
DiRt 不 等 的 #F 月 x 呈 汪 


© | D fiey//D/FirstTest/work/work2 html 医 


II | 
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本 次 练习 要 求 读 者 主要 利用 本 章 的 知识 实现 一 个 多 列 布局 表单 ， 最 终 效果 如 图 12-15 所 


本 次 上 机 练习 要 求 读者 使 用 column-count、 column-grap、column-fill 等 属性 设计 不 等 高 


第 13 章 
Javascript 脚本 编程 快速 入 门 


全 | 本 章 学 习 要 点 


了 解 JavaScript 与 Java 的 区 别 

熟悉 编写 JavaScript 脚本 的 方法 及 注意 事项 

掌握 JavaScript 的 数据 类 型 、 变 量 与 常量 的 声明 以 及 运算 符 
掌握 if 和 switch 条 件 语句 的 使 用 

掌握 while、do while、for 和 for in 循环 语句 的 使 用 

掌握 对 话 框 语句 的 使 用 

了 解 JavaScript 常用 系统 函数 

掌握 自 定义 函数 的 创建 和 调用 

熟悉 JavaScript 中 的 浏览 器 对 象 模型 


[EeegeekeeeRel 
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人 9) 13.1 JavaScript 语言 简介 
JavaScript 是 一 种 基于 对 象 的 脚本 语言 。JavaScript 的 使 用 方法 ， 其 实 就 是 在 页 面 的 


HTML 文件 中 增加 一 个 脚本 , 当 浏览 器 打开 这 个 页 面 时 ， 它 会 读 取 这 个 脚本 并 执行 其 命令 ( 需 
要 浏览 器 支持 JavaScript) 。 另 外 ， 在 页 面 中 运用 JavaScript 可 以 使 网 页 变 得 生动 。 
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川 ) 13.1.1 JavaScript 简介 


最 初 称 为 LiveScript， | 


豆 


JavaScript 语 
是 由 Netscape 公司 开发 的 。 在 1995 年 1 
月 Navigator 2 正式 发 布 之 前 Netscap 
和 Sun 联合 发 表 了 一 项 声明 才 正 式 命名 
为 JavaScript。 它 是 一 种 轻型 的 解释 型 的 
程序 设计 语言 ， 而 且 具 有 面向 对 象 的 能 
力 。JavaScript 语言 的 通用 核心 已 经 说 入 
Netscape、Internet Explorer 和 其 他 常见 的 
Web 浏览 器 中 。 

虽然 JavaScript 语言 起 源 于 Netscape， 但 
是 Microsoft 公司 看 到 了 这 种 语言 的 性 能 和 流 
行 趋势 ， 在 其 Intermet Explorer 3.0 版 本 的 浏 
览 器 中 实现 了 JScript， 它 与 Netscape 公司 的 
JavaScript 基本 相同 ， 只 是 在 一 些 细节 上 有 出 
语言，i 
把 它 看 成 JavaScript 的 分 支 。 

JavaScript 已 经 被 Netscape 公司 提交 
给 ECMA 制定 为 标准 ， 称 为 ECMAScript， 
标准 编号 为 ECMA-262。 符 合 该 标准 的 实 
现 有 : Microsoft 公 司 的 JScript、Mozill 
的 JavaScript-C (C 语言 实现 ， 现 命名 为 
Spidermonkey) 、Mozilla 的 Rhino (Java 实 
现 ) ， 以 及 Digital Mars 公司 的 DMDScript : 


等 。 从 ECMAScript 的 角度 来 看 ，JavaScript 
和 JScript 就 是 Netscape 公司 和 Microsoft 公 
司 分 别 对 ECMAScript 实现 的 不 同 技术 。 
JavaScript 的 主要 特点 如 下 
e@ 简单 性 JavaScript 是 一 种 脚本 语言 ， 
它 采 用 小 程序 段 的 方式 实现 编程 。 
JavaScript 也 是 一 种 解释 性 语言 ， 它 
的 基本 结构 形式 与 C、C#、VB 等 十 
分 类 似 ， 但 它 不 需要 编译 ， 而 是 在 程 
序 运行 过 程 中 被 逐 行 地 解释 。 
基于 对 象 ”JavaScript 是 基于 对 象 的 语 
言 ， 它 可 以 运用 自己 创建 的 对 象 以 及 
对 象 方法 实现 许多 功能 。 
动态 性 JavaScript 是 动态 的 ， 它 以 
事件 驱动 的 方式 直接 对 用 户 的 输入 做 
出 响应 。 所 谓 事件 驱动 ， 就 是 指 在 主 
页 中 执行 某 种 操作 所 产生 的 动作 。 当 
事件 发 生 后 ， 可 能 会 引起 相应 的 事件 
响应 。 
跨 平 台 性 ”JavaScript 仅仅 依赖 于 浏 
览 器 本 身 ， 而 与 操作 环境 无 关 ， 只 要 
能 运行 支持 JavaScript 的 浏览 器 就 可 
以 运行 。 


) 13.1.2 ” JavaScript 与 Java 的 关系 


说 到 JavaScript， 读 者 也 许 会 把 它 与 Java ; 
联系 在 一 起 ， 常 见 的 误解 是 ， 认 为 它 是 Jav: 
语言 的 简化 版 本 。 其 实 ， 除 了 在 语法 结构 上 
有 一 些 相 似 ， 以 及 都 能 够 提供 网 页 中 的 可 执 
行内 容 之 外 ， 它 们 是 完全 不 相干 的 。 主 要 区 
别 有 以 下 几 个 方面 。 


医 世 开发 育 不 同 
它们 是 两 个 公司 开发 的 两 个 不 


Java 是 SUN ( 现 属 于 Oracle) 公司 推出 的 面 


| 向 对 象 的 程序 设计 语言 ， 特 别 适 合 Intemet 应 


用 程序 开发 ， 而 JavaScript 是 Netscape 公司 
的 产品 ， 为 了 扩展 Netscape Navigator 功能 而 
开发 的 一 种 可 以 嵌入 Web 页 面 中 ， 基 于 对 象 
和 事件 驱动 的 解释 性 语言 。 
匡 语言 类 型 不 同 
JavaScript 是 基于 对 象 的 ， 而 Java 是 面 


语言 , 即使 开发 简单 的 程序 , 也 必须 设计 对 象 。 
JavaScript 是 一 种 脚本 语言 ， 
网 络 无 关 的 ， 与 用 户 交 互 作用 的 复杂 功能 。 


由 于 JavaScript 是 一 种 基于 对 象 和 事件 驱动 
的 编程 语言 ， 因 此 它 本 身 提供 了 非常 丰富 的 | 


内 部 对 象 供 设计 人 员 使 用 。 
攻 区 执行 机 制 不 同 


两 种 语言 在 浏览 器 中 所 执行 的 方式 不 ; 
一 样 。Java 的 源 代 码 在 传递 到 客户 端 执行 ; 
而 客户 端 上 必须 ; 
具有 相应 平台 上 的 仿真 器 或 解释 器 ， 它 可 | 
以 通过 编译 器 或 解释 器 实现 独立 于 某 个 特 
定 的 平台 编译 代码 的 束缚 。JavaScript 是 一 | 
种 解释 性 编程 语言 ， 其 源 代 码 在 发 往 客户 ; 


之 前 ， 必 须 经 过 编译 ， 因 


端 执 行 之 前 不 需 经 过 编译 ， 而 是 将 文本 格 


执行 。 
攻 杠 变量 使 用 方式 不 同 
两 种 语言 所 采取 的 变量 是 不 一 样 的 。 
Java 采用 强 类 型 变量 检查 ， 即 所 有 变量 在 编 
译 之 前 必须 做 声明 。JavaScript 采用 弱 类 型 ， 


可 以 用 来 制作 与 ; 


式 的 字符 代码 发 送 给 客户 ， 由 浏览 器 解释 | 
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向 对 象 的 ， 即 Java 是 一 种 真正 的 面向 对 象 的 } 


i 即 变量 在 使 用 前 不 需 做 声明 ， 而 是 解释 器 在 
| 运行 时 检查 其 数据 类 型 。 

[ER 代码 格式 不 同 

Java 是 一 种 与 HTML 无 关 的 格式 ， 必 须 

通过 像 HTML 中 引用 外 媒体 那样 进行 装载 ， 
| 其 代码 以 字 节 代码 的 形式 保存 在 独立 的 文档 
”中 。JavaScript 的 代码 是 一 种 文本 字符 格式 ， 
; 可 以 直接 嵌入 HIML 文档 中 ， 并 且 可 以 动态 
装载 。 编 写 HTML 文档 就 像 编辑 文本 文件 一 
样 方便 。 

ER 垃 入 方式 不 同 


在 HTML 文档 中 ， 两 种 编程 语言 使 用 的 
标记 不 同 ，JavaScript 使 用 <script>.….</script> 
来 标记 ， 而 Java 使 用 <applet> … </applet> 来 
; 标记 。 

[2 线 定 方式 不 同 

: Java 采用 静态 联 编 ， 即 Java 的 对 象 引 
| 用 必须 在 编译 时 进行 ， 以 使 编译 器 能 够 实现 
| 强 类 型 检查 。JavaScript 采用 动态 联 编 ， 即 
| JavaScript 的 对 象 引 用 在 运行 时 进行 检查 ， 不 
; 经 编译 就 无 法 实现 对 象 引用 的 检查 。 


叫 ) 13.1.3 JavaScript 语法 规则 


所 有 的 编程 语言 都 有 自己 的 语法 规则 ， 


用 来 说 明 如 何 用 这 种 语言 编写 程序 ， 为 了 程 ， 
序 能 够 正确 运行 并 减少 错误 的 产生 ， 必 须 遵 


守 这 些 语法 规则 。 由 于 JavaScript 不 是 一 种 独 
立 运行 的 语言 ， 所 以 在 编写 JavaScript 代码 


时 ， 必 须知 晓 JavaScript 语法 规则 。 下 面 介 绍 ， 


JavaScript 的 语法 规则 。 
全 变量 和 函数 名 称 
当 定 义 自己 使 用 的 变量 、 对 象 或 函数 时 ， 


名 称 可 以 由 任意 大 小 写字 母 、 数 字 、 下 划 线 | 
(_) 、 美 元 符号 ($) 组 成 , 但 不 能 以 数字 开头 ，; 


也 不 能 是 JavaScript 中 的 关键 字 。 示 例如 下 : 


password，User_ID，_name ”// 合法 的 
if, document, for, Date // 非法 的 


区 区 分 大 小 三 

: JavaScript 是 严格 区 分 大 小 写 的 ， 大 写字 

| 母 与 小 写字 母 不 能 相互 替换 ， 例 如 name 和 

”Name 是 两 个 不 同 的 变量 。 基 本 规则 如 下 。 

: ®@ JavaScript 中 的 关键 词 ， 例 如 for 和 让, 
永远 都 是 小 写 。 

e DOM 对 象 的 名 称 通常 都 是 小 写 ， 但 是 
其 方法 通常 都 是 大 小 写 混 合 ， 第 一 个 字 
母 一 般 都 小 写 ， 例 如 getElementById、 
replaceWith 等 。 

e@ 内置 对 象 通常 以 大 写字 母 开头 ， 例 如 
String、Date 等 。 


全 代码 的 格式 


在 JavaScript 程序 中 ， 每 条 功能 执行 的 
i 语句 都 要 用 分 号 〈:) 结束 ， 各 词 之 间 用 空格 、 
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小 括号 这 样 的 分 隔 符 隔 开 ; 
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换行 符 或 大 括号 、 
就 行 了 。 
在 JavaScript 程序 中 ， 一 行 可 以 写 一 


条 


语句 ， 也 可 以 写 多 条 语句 。 一 行 中 写 一 条 语 ; 
句 时 ， 要 以 分 号 (:) 结束 。 一 行 中 写 多 条 语 | 


句 时 ， 语 句 之 间 使 用 至 号 (,) 分 隔 。 例 如 ， 
以 下 写法 都 正确 : 
var m=9; 
var n=8; // 以 分 号 结束 
或 
var m=9,n=8; // 以 逗号 分 隔 
氏 代码 的 注释 


和 作用 ， 提 高 程序 的 可 读 性 。 
取消 注释 标记 。 
以 提高 


注释 是 脚本 的 主要 组 成 部 分 ， 可 | 
程序 的 可 读 性 ， 而 且 可 以 利用 它们 来 | 


理解 和 维护 脚本 ， 有 利于 团队 开发 。 
JavaScript 可 以 使 用 单行 注释 和 多 行 注释 


条 ， 两 种 注释 方式 。 


(1) 单行 注释 。 
在 所 有 程序 的 开始 部 分 都 应 有 描述 其 功 


能 的 简单 注释 ， 或 者 是 在 某 些 参数 需要 加 以 
说 明 的 时 候 ， 这 就 用 到 了 单行 注释 (“//”)， 
单行 注释 以 两 个 斜 杠 开头 ， 并 且 只 对 本 行内 
， 容 有 效 。 


示例 如 下 : 
//vari=1; 


这 是 对 单行 代码 的 注释 


(2) 多 行 注释 。 
多 行 注释 表示 一 段 代 码 都 是 注释 内 容 。 


”多 行 注释 以 符号 “/*” 开 头 ， 并 以 “*/” 结 尾 ， 


注 大 可 以 用 天 程序 茜 部分 的 功能 企及， 可 以 跨 多 行 ， 但 不 能 谍 套 


另外 还 可 以 用 | 
er 等 到 需要 的 时 候 , 应 ; 


使 用 。 示 例如 下 : 
性 这 是 一 个 多 行 注释 


var i=1; 
var j=2; 


ef 


Q7) 13.2 编写 JavaScript 程序 


本 节 通 过 示例 讲解 如 何在 页 面 中 编写 JavaScript 程序 ， 如 何 使 用 外 部 的 JavaScript 文件 ， 


以 及 编写 时 的 一 些 注意 事项 。 
串 ) 13.2.1 


在 创建 JavaScript 程序 之 前 ， 
握 创建 JavaScript 程序 的 方法 ， 
HTML 文件 中 调用 执行 》JavaScript 程序 。 


区 直接 调用 


在 HTML 文件 中 ， 可 以 使 用 直接 调用 ; 
方式 嵌入 JavaScript 程序 。 方 法 是 : 使 用 | 
<script> 和 </script> 标记 在 需要 的 位 置 编写 | 


JavaScript 程序 。 
【 例 13-1] 


下 面 的 代码 直接 调用 JavaScript 输出 一 


段 HIML， 效 果 如 图 13-1 所 示 。 


需要 掌 | : 
以 及 如 何在 ; 


集成 JavaScript 程序 


ME) E\WWW\testL html 
息 ENWWwWtestLhtml x 


直接 调用 JavaScript 程 序 


欢迎 来 到 JavaScript 世 界 … 


图 13-1 直接 调用 JavaScript 程序 
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<h2> 直接 调用 Javascript 程序 </h2> | 【 例 13-2] 
”下面 的 代码 使 用 单 击 事件 调用 JavaScript 
<script language="JavaScript"> | 显示 当前 时 间 ， 效 果 如 图 13-2 所 示 。 
var str=" 欢迎 来 到 JavaScript 世界 ..。"; | [STET] 
document.write(str); : /BE © Pox 
y 号 EVWWer hem 
5 事件 调用 Javascript 程 序 
</h3> RN 
单 击 这 里 查看 当前 时 间 
攻取 事件 调用 | A 
在 HIML 标记 的 事件 中 调用 JavaScript 下 
程序 ， 例 如 单 击 事件 onclick、 鼠 标 移动 事件 ; [a 发 
onmousover 和 载 入 事件 onload 等 . | 图 13-2 事件 调用 JavaScript 程序 


<h2> 事件 调用 JavaScript 程序 </h2> 

<script language="JavaScript"> 

function sayDate() 

var dt=new Date(); 

var strdate=" 您 好 。\n 现在 时 间 为 : "+dt; 

alert(strdate); 

} 

</script> 

<P onclick="sayDate();"> 单 击 这 里 查看 当前 时 间 </P> 


o 一 技巧 
| 还 有 一 种 简约 的 调用 JavaScript 的 格式 ， 例 如 在 链接 标记 中 使 用 <a hre 人 "javascript'alert(Hello | 
| World) ">Click me</a>。 j 
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外 部 文件 就 是 只 包含 JavaScript 的 单独 文件 ， 这 些 外 部 文件 名 都 以 js 后 缀 结尾 。 使 用 时 ， 
只 需 在 < script > 标签 中 添加 src 属性 指向 文件 ， 就 可 以 调用 ， 大 大 减少 了 每 个 页 面 上 的 代码 ， 
更 重要 的 是 ， 这 会 使 站 点 更 容易 维护 。 当 需要 对 脚本 进行 修改 时 ， 只 需 修改 js 文件 ， 所 有 引 
用 这 个 文件 的 HIML 页 面 会 自动 受到 修改 的 影响 。 

【 例 13-3】 

有 一 名 为 libjs 的 外 部 文件 ， 该 文件 包含 的 JavaScript 脚本 如 下 。 


// 显示 中 文 提示 的 日 期 
function showDate(){ 


333 国 


1dUoSeAer+SsSSI+S1WNLH 人 


转 334 


vary=new Datel); 


var gy=y.getYear(); 
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var dName=new Array(" 星期 天 "," 星期 一 "" 星期 二 "," 星期 三 "," 星期 四 "," 星期 五 "," 星 


期 六 "); 
var mName=new Array("1 月 ","2 月 ", 


月 "11 月 "12 月 ") 


"3 月 "4 月 "5 月 "6 月 "7 月 "8 


月 "9 月 "40 


document.write("<FONT COLOR=\"black\" class=\"p1\">"+y.getYear()+" 年 " + mName[y. 


getMonth()] + y.getDate() + " 日 "+ dName[y.getDay()] +" 


} 


showDate(); 


在 上 述 代 码 中 ， 创 建 了 一 个 函数 | 
showDate0， 获 取 当 前 的 日 期 和 时 间 进 行 格 | 
式 化 后 ， 以 中 文 的 形式 输出 日 期 。 接 下 来 创 | 
建 HTML 文件 ， 引 用 libjs 文件， 代码 如 下 ; 
所 示 : 


<h2> 链接 外 部 J 文件 </h2> 
<h3> 当前 日 期 : 

<script src="lib.js"></script> 
</h3> 


叫 ) 13.2.3 ”注意 事项 


在 编写 JavaScript 程序 时 有 些 要 点 需 | 
如 代码 中 的 空格 、 换 行 以 及 分 号 : 
这 些 细小 的 问题 通常 会 导致 程序 ; 


要 注 
问题 ， 
错误 。 


EL 


音 
尽 ， 


在 JavaScript 脚本 语言 中 ， 如 果 代码 中 | 
但 | 


有 多 余 的 空格 ， 则 多 余 的 空格 将 被 忽略 ， 
同一 个 标识 符 的 所 有 字母 必须 连续 。 例 如 ， 
下 述 的 代码 在 JavaScript 中 被 认为 是 正确 的 。 


<script language="javascript"> 
< 
vara=100; 
function fun() 
{ 
var b= 10; 
document .write ("b 的 值 是 : " +b); 


| 由理 Ewwwwesahl xT 


"+ "</FONT>"); 


在 浏览 器 中 运行 ， 具 体 效 果 如 图 13-3 


所 示 。 


仿 司 加 EAWWVNtest hm Oo-cx)r 


链接 外 部 JS 文件 
当前 日 期 2017 年 3 月 2 日 星期 四 


13-3 ”链接 外 部 JavaScript 文件 


fun(); 
document.write("<br>"); 
document.write ("a 的 值 是 :" +a); 


ep 


</script> 


在 JavaScript 中 ， 一 行 代 码 可 以 分 成 多 


行进 行书 写 ， 例 如 下 面 的 这 段 代码 。 


<script> 
if(typeof a=='undefined) 
alert('a 未 定义 小 
var 
a=0; 
if(typeof al='undefined) 
alert('a 已 定义 小 
</script> 


第 13 章 ， JavaScript 脚本 编程 快速 入 门 


一 


所 有 的 代码 写 在 一 行 时 ， 用 分 号 作为 各 语句 的 结束 标志 。 例 如 ， 将 上 述 代码 写 在 一 行 中 
的 效果 如 下 : 

<script language="javascript"> 

if(typeof a=='undefined') alert('a 未 定义 ');var a=0;if(typeof al='undefined') alert('a 已 定义 ); 


</script> 


医 芭 分 号 
在 JavaScript 中 ， 分 号 通常 作为 一 个 i 


<script language="javascript"> 


<!-- 
句 的 结束 标志 。 如 果 将 多 个 语句 写 在 一 行 中 ， varusername=" 陈强" 
则 需要 用 分 号 来 结束 各 个 语句 ， 这 样 看 起 来 document.write(username) 
比较 清晰 ， 增 强 了 代码 的 可 读 性 。 document.write("<br>") 
当 一 行 只 有 一 个 程序 语句 时 ， 则 该 语句 document.write('http://www.chenqiang.com') 
的 结尾 可 以 不 使 用 分 号 ， 代 码 如 下 : = 
: </script> 


9) 13.3 ”JavaScript 脚本 语法 


在 掌握 JavaScript 程序 的 创建 和 执行 方法 之 后 ， 本 节 主 要 介绍 与 JavaScript 有 关 的 基础 语 
法 ， 包 括 JavaScript 的 数据 类 型 、 变 量 和 运算 符 。 


叫 ) 13.3.1 数据 类 型 


JavaScript 允许 使 用 三 种 基础 的 数据 类 型 : 整 型 、 字 符 串 和 布尔 值 。 此 外 ， 还 支持 两 种 复 
合 的 数据 类 型 一 一 对 象 和 数组 ， 它 们 都 是 基础 数据 类 型 的 集合 。 对 象 作为 一 种 通用 数据 类 型 ， 
在 JavaScript 中 也 支持 ， 而 函数 和 数组 都 是 特殊 的 对 象 类 型 。 
此 外 ，JavaScript 还 为 特殊 的 目的 定义 了 其 他 特殊 的 对 象 类 型 ， 例 如 Date 对 象 表示 一 个 
日 期 和 时 间 类 型 。 表 13-1 中 列 出 了 JavaScript 支持 的 6 种 数据 类 型 。 
表 13-1 JavaScript 支持 的 数据 类 型 


数据 类 型 数据 类 型 名 称 示 例 
Dumber 数值 类 型 123, —0.129871,071,0X1fa 
string 字符 囊 类 型 'Hello','get the &','b@911.com' 
object 对 象 类 型 Date,Window,Document 
boolean 布尔 类 型 true , false 
null 空 类 型 null 
undefined 未 定义 类 型 tmp,demo,today,gettime 


下 面 是 数值 类 型 的 一 些 示例 。 
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.0001, 0.0001, 1e-4, 1.0e-4 // 四 个 浮 点 数 ， 它 们 互 等 

3.45e2 // 一 个 浮 点 数 ， 等 于 345 

42 // 一 个 可 

0377 // 一 个 八进制 整数 ， 等 于 255 

00.0001 // 由 于 八进制 数 不 能 有 小 数 部 分 ， 因 此 这 个 数 等 于 0 
0378 // 一 个 整数 ， 等 于 378 

OXff // 一 个 十 六 进 制 整 数 ， 等 于 255 

Ox37CF // 一 个 十 六 进 制 整数 ， 等 于 14287 

Ox3e7 // 一 个 十 六 进 制 整数 ， 等 于 999 

Ox3.45e2 // 由 于 十 六 进 制 数 不 能 有 小 数 部 分 ， 因 此 这 个 数 等 于 3 


下 面 再 来 看 一 些 字符 串 类 型 的 示例 。 


"Hi, this is HT” 

"Where are we. In the hospital' 
"84n" 

"| don't know.” 

"Three" she said." 


| JavaScript 语言 为 弱 类 型 语言 , 不 同类 型 之 间 的 变量 进行 运算 时 , 会 优先 考虑 字符 囊 类 型 。 例 如 ， 
| 表达 式 8+"8" 的 执行 结果 为 88。 


咱 》13.3.2 ”变量 与 常量 

在 JavaScript 中 变量 用 来 存放 脚本 中 的 值 ， 一 个 变量 可 以 是 一 个 数字 、 文 本 或 其 他 一 些 
东西 。JavaScript 是 一 种 对 数据 类 型 变量 要 求 不 太 严格 的 语言 ， 所 以 不 必 声 明 每 一 个 变量 的 类 
型 ， 变 量 声明 尽管 不 是 必需 的 ， 但 在 使 用 变量 之 前 先进 行 声 明 是 一 种 好 的 习惯 。 
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使 用 var 语句 来 声明 变量 。 


var men =true; // men 中 存储 的 值 为 布尔 类 型 
var intCount=1; //intCount 中 存储 的 是 整 型 数值 
var strName='ZHT'; //strName 中 存储 的 是 字符 串 类 型 值 


在 上 面 的 示例 中 ， 我 们 命名 了 三 个 变量 men、intCount 和 strName， 它 们 的 类 型 分 别 是 布 
尔 型 、 整 型 和 字符 串 类 型 。 

起 下 变量 命名 规则 

在 命名 变量 时 ， 要 注意 JavaScript 是 一 种 区 分 大 小 写 的 语言 ， 因 此 将 一 个 变量 命名 为 
men 和 将 其 命名 为 MEN 是 不 一 样 的 。 另 外 ， 变 量 名 称 的 长 度 是 任意 的 ， 但 必须 遵循 以 下 
规则 。 
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。 第 一 个 字符 必须 是 一 个 字母 (大 小 写 | 。 四 常量 

均 可 ) 、 一 个 下 划 线 或 一 个 美元 各 

四 区 各 中 或 -个 美元 特 常量 是 一 种 恒定 的 或 者 不 可 变 的 数 信 或 
后续 的 字符 可 以 是 字母 、 数 字 、 下 划 在 JavaScript 中 ， 常 量 可 以 分 为 


线 或 美元 符 。 

。 变量 名 称 不能 是 保留 字 。 et 
7 征 个 陛 上 o 

俩 变量 赋值 型 常量 可 以 使 用 十 六 进 制 、 八 进 制 和 


十 进 制 数值 。 

e@ 实 型 常量 实 型 常量 包含 整数 部 分 和 
小 数 部 分 ， 如 12.32、193.98。 可 以 用 
科学 或 者 标准 方法 表示 ,如 5E7、4e5 等 。 

e 布尔 值 布尔 常量 只 有 两 种 状态 : 
True 或 者 False。 它 主 要 用 来 说 明 或 者 
代表 一 种 状态 或 者 标志 ， 以 说 明 操作 
流程 。 

e 字符 型 常量 使 用 单 引 号 (') 或 者 双 
引号 (") 括 起 来 的 一 个 或 者 几 个 字 
符 ， 如 "This is a book of JavaScript" 

"3245" "ewrt234234" 等 。 

下 面 的 几 个 示例 : e@ 空 值 JavaScript 中 有 一 个 空 值 null, 

表示 什么 也 没有 。 如 试图 引用 没有 定 

义 的 变量 , 则 返回 一 个 Null 值 。 


为 变量 命名 之 后 ， 就 可 以 对 变量 进 
行 赋值 了 。JavaScript 里 为 变量 赋值 的 语 
法 如 下 : 


var< 变量 >[=< 值 >]; 


这 里 的 var 是 JavaScript 的 保留 字 ， 不 可 
以 修改 。 后 面 是 要 命名 的 变量 名 称 ， 值 是 可 
选 的 ， 可 以 在 命名 时 赋予 变量 初始 值 。 要 一 
次 定义 多 个 变量 时 ， 使 用 以 下 语法 : 


var 变量 1 变量 2, 变量 3 变量 4, …, 变量 n; 


var minScore=0, minScore=100 ; 

var aString = ' 

var anlnteger = 0, ThisDay='2007-7-237 
var isChecker=false, aFarmer=true ; 


叫 )》 13.3.3 ”运算 符 


运算 符 用 于 将 一 个 或 者 几 个 值 变 成 结果 值 ， 使 用 运算 符 的 值 称 为 操作 数 ， 运 算 符 及 操作 
数 的 组 合 称 为 表达 式 。 例 如 ， 下 面 的 表达 式 : 


i=j-100; 
在 这 个 表达 式 中 ，i 和 j 是 两 个 变量 ，“ 一 ”是 运算 符 ， 用 于 将 两 个 操作 数 执行 减 运算 ， 
100 是 一 个 数值 。 
全 区 算术 运算 符 


算术 运算 符 是 最 简单 、 最 常用 的 运算 符 , 可 以 使 用 它们 进行 通用 的 数学 计算 , 如 表 13-2 所 示 。 


表 13-2 算术 运算 符 


X=5 一 3， 结果 为 2 
XX=5*3， 结 果 为 15 
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( 续 表 ) 


返回 区 与 了 的 模 (Xx 除 以 y 的 余数 ) X=5%3， 结 果 为 2 


返回 数值 递增 、 递 增 并 运 回 数 值 5++、++5， 结 果 为 5、6 
= X--、- 民 返回 数值 递减 、 递 减 并 运 回 数 值 5--、--5， 结 果 为 5、4 


全 逻辑 运算 符 
逻辑 运算 符 通 常用 于 执行 布尔 运算 ， 它 们 常 和 比较 运算 符 一 起 使 用 ， 表 示 复 杂 比 较 运 
算 ， 这 些 运算 涉及 的 变量 通常 不 止 一 个 ， 而 且 常 用 于 让 、while 和 for 语句 中 。 表 13-3 列 出 了 
JavaScript 支持 的 逻辑 运算 符 。 


表 13-3 ”逻辑 运算 符 
表达 式 1 && | 若 两 边 表达 式 的 值 都 为 tue， 则 返回 tue; 任 | 5>3&&5<6 返回 true 
表达 式 2 意 一 个 值 为 false， 则 返回 false 5>3&&5>6 返回 false 


表达 式 11| 表 | ， 5>3|5>6 返回 true 
| 达 式 2 只 有 表达 式 的 值 都 为 false 时 ， 才 返回 false 5>7|5>6 返回 false 


求 反 。 若 表达 式 的 值 为 tue， 则 返回 false， !( 5>3) 返回 false 


Ce 否则 返回 true !( 5>6) 返回 true 
后 比较 运算 符 
比较 运算 符 用 于 对 运算 符 的 两 个 表达 式 进行 比较 ， 然 后 返回 boolean 类 型 的 值 ， 例 如 ， 比 
较 两 个 值 是 否 相同 或 比较 数字 值 的 大 小 等 。 表 13-4 列 出 了 JavaScript 支持 的 比较 运算 符 。 
表 13-4 比较 运算 符 
说 明 示 例 
计 Score 一 100 
交合 全 人 /比较 Score 的 值 是 否 等 于 100 
i a | Score 人 00 
判断 左边 表达 式 是 否 不 等 于 右边 表达 式 /比较 Score 的 值 是 否 不 等 于 0 
, 二 a Score > 100 
判断 左边 表达 式 是 否 大 于 右边 表达 式 // 比较 Score 的 值 是 否 大 于 100 
麟 断 左边 表达 式 是 否 大 于 或 等 于 右边 | ie 
全 二 ee Eh // 比较 Score 的 值 是 否 大 于 或 等 于 
表达 式 
100 
关 琴 通天 村 Score < 100 
剂 断 左 边 表 达 式 是 否 小 于 三 边 表达 式 。 | // 比较 Score 的 舍 是 否 小 于 100 
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( 续 表 ) 


Score <= 100 
> // 比较 Score 的 值 是 否 小 于 或 等 于 


表达 式 1<= | 判断 左边 表达 式 是 否 小 于 或 等 于 右边 


表达 式 2 表达 式 i 


字符 中 运算 符 
JavaScript 支持 使 用 字符 囊 运算 符 (+) 对 两 个 或 多 个 字符 串 进行 连接 操作 ， 这 个 运算 符 
的 使 用 比较 简单 ， 下 面 给 出 几 个 应 用 示例 。 


var str1="Hello 
var str2="World"; 
var str3="Love"; 


var Result1=str1+str2 ; // 结果 为 HelloWorld 
var Result2=str1+" "+str2 ; // 结果 为 Hello World 
var Result3=str3+" in "+str2; // 结果 为 Love in World 


var sqlstr="Select * from [user] where username='"+"ZHT"+ 
// 结果 为 Select * from [user] where username='ZHT' 
var a="5",b="2", c=a+b; //c 的 结果 为 52 


医 区 位 操作 运算 符 
位 操作 运算 符 对 数值 的 位 进行 操作 ， 如 向 左 或 向 右 移 位 等 。 表 13-5 列 出 了 JavaScript 支 
持 的 位 操作 运算 符 。 


表 13-5 位 操作 运算 符 


表达 式 1 & 表达 式 2 
表达 式 1 | 表达 式 2 
表达 式 1^ 表 达 式 2 
表达 式 1 << 表达 式 2 


当 两 个 表达 式 的 值 都 为 tue 时 返回 1， 否 则 返回 0 
当 两 个 表达 式 的 值 都 为 false 时 返回 0， 否则 返回 1 
两 个 表达 式 中 有 且 只 有 一 个 为 false 时 返回 0， 否则 为 1 
将 表达 式 1 向 左 移动 表达 式 2 指定 的 位 数 


表达 式 1 >> 表达 式 2 将 表达 式 1 向 右 移动 表达 式 2 指定 的 位 数 
>>> 表达 式 1 >>> 表达 式 2 将 表达 式 1 向 右 移动 表达 式 2 指定 的 位 数 ， 空 位 补 0 
~ 表达 式 将 表达 式 的 值 按 二 进 制 逐 位 取 反 
医 区 赋值 运算 符 


赋值 运算 符 用 于 更 新 变量 的 值 ， 有 些 赋值 运算 符 可 以 和 其 他 运算 符 组 合 使 用 ， 对 变量 
包含 的 值 进 行 计算 ， 然 后 用 新 值 更 新 变量 。 表 13-6 列 出 了 赋值 运算 符 。 
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表 13-6 赋值 运算 符 


运算 符 表达 式 说 明 
变量 = 表达 式 将 表达 式 的 值 赋 子 变量 
二 变量 += 表达 式 将 表达 式 的 值 与 变量 值 执行 + 操作 后 赎 予 变量 
3 变量 一 一 表达 式 将 表达 式 的 值 与 变量 值 执行 一 操作 后 赋 子 变量 
二 变量 *= 表达 式 将 表达 式 的 值 与 变量 值 执行 * 操作 后 赋予 变 量 
区 三 变量 广 表达 式 将 表达 式 的 值 与 变量 值 执行 /操作 后 赋予 变量 
%= 变量 9%6- 表达 式 将 表达 式 的 值 与 变量 值 执行 % 操作 后 赋予 变量 
到 <<= 变量 <<= 表达 式 对 变量 按 表 达 式 的 值 向 左 移 
HH | > 变量 >>= 表 达 式 对 变量 按 表达 式 的 值 向 右 移 
图 | > 变量 >>>= 表达 式 。 | 对 变量 按 表达 式 的 值 向 右 移 ， 空 位 补 0 
沁 &= 变量 &= 表达 式 将 表达 式 的 值 与 变量 值 执行 & 操 作 后 冉 子 变量 
六 F 变量 上 表达 式 将 表达 式 的 值 与 变量 值 执行 | 操作 后 赋予 变量 
a 变量 ^ 表达 式 将 表达 式 的 值 与 变量 值 执行 ^ 操 作 后 赋 子 变量 
Fl 四 条件 运算 符 
S JavaScript 支持 Java、C 和 C++ 中 的 条 件 表达 式 运 算 符 〈?) ， 这 个 运算 符 是 二 元 运算 符 
w 它 有 三 个 部 分 : 一 个 计算 值 的 条 件 和 两 个 根据 条 件 返 回 的 真 假 值 。 格 式 如 下 : 
= 条 件 ? 值 1: 值 2 
ey 含义 为 ， 如 果 条 件 为 真 ， 则 表达 值 使 用 值 1， 否 则 使 用 值 2。 例 如 
(x>y)?30:31 


如 果 x 的 值 大 于 y 值 ， 则 表达 式 的 值 为 30; 如果 x 的 值 小 于 或 等 于 y 值 时 ， 表 达 式 的 值 
为 31。 


9 7) 13.4 ”脚本 控制 语句 


为 了 使 整个 程序 按照 一 定 的 方式 执行 ，JavaScript 语言 提供 了 控制 脚本 程序 执行 流程 的 语 
句 ， 使 程序 按照 某 种 顺序 处 理 语 句 。 这 种 顺序 可 以 根据 条 件 进行 改变 ， 或 者 循环 执行 语句 ， 
甚至 弹出 一 个 对 话 框 提示 用 户 等 。 


叫 ) 13.4.1 if 条 件 语句 
让 语句 是 使 用 最 多 的 条 件 分 支 语 句 ， 在 JavaScript 中 ， 它 有 多 种 形式 。 每 一 种 形式 都 需 
要 一 个 条 件 表 达 式 ， 然 后 再 对 分 支 进行 选择 。 
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四 基本 i 语句 : alert(" 优秀 路 
让 语句 的 最 简 语 法 格式 如 下 ， 此 时 表示 ， ”lm>=60&&m <80) 
“如 果 满 足 某 种 条 件 ， 就 进行 某 种 处 理 ”。 。 alert(" 及 格 路 
| if (m >= 0 && m < 60) 
if( 条 件 表达 式 ){ | alert(" 不 及 格 "); 
语句 块 ; | if (m > 100) 


} : alert(" 不 存在 "); 


其 中 ， 条 件 表达 式 可 以 是 任何 一 种 多 辑 


Var score=95; 1 块 2 
if (m >= 80 && m <= 100) : ” 


< 全 je 


证 和 else 语句 中 不 包含 分 号 。 如 果 在 让 或 者 else 之 后 输入 了 分 号 ， 那 么 将 终止 这 个 语 身 ， 并 
| 且 无 条 件 执行 随后 的 所 有 语 向 。 | 


表达 式 ， 如 果 返 回 结果 为 tue， 则 程序 先 执 | 《 if else 语句 也 
行 后 面 大 括号 ({)) 中 的 语句 ， 然 后 执行 它 后 ; 站 else 语句 的 基本 语法 如 下 : 

面 的 其 他 语句 。 如 果 返 回 结果 为 false， 则 程 ; 工 

序 跳 过 条 件 语句 后 面 的 语句 ， 直 接 去 执行 程 | ta = 

序 后 面 的 其 他 语句 。 | 语句 块 1; 三 

【 例 13-4】 | }else{ 图 

假设 学 生成 绩 的 等 级 划分 为 ，80 一 100 ， 3 本 

为 优秀 ，60-80 为 及 格 ，60 以 下 为 不 及 格 。 . 9 

下 面 使 用 让 语句 根据 成 绩 显示 对 应 的 等 级 ， ; 上面 语句 的 执行 过 程 是 ， 先 判断 并 语 ”了 

， 句 后 面 的 条 件 表达 式 ， 如 果 值 为 tue， 则 执 。 | 

| 行 语句 块 1， 如 果 值 为 false， 则 执行 语句 “上 咪 

E* 

< 

v9 

0 

0 

a 

号 


【 例 13-5】 
在 一 个 会 员 系 统 中 需要 根据 当前 用 户 的 状态 ， 即 是 否 已 经 登录 来 显示 一 段 提示 文本 和 一 
个 跳 转 链接 。 以 下 是 区 分 登录 用 户 与 游客 的 代码 。 


if (userType == "user") 


{ 
document.write("<h3> 登录 成 功 一 </h3>"); 
document.write("<a href='http://www.baidu.com'> 新 闻 中 心 </a>"); 
: 
else 
. 
document.write("<h3> 游客 ， 欢 迎 你 的 光临 。</h3>"); 
document.write("<a href='http://www.baidu.com/reg'> 免费 注册 会 员 </a>"); 
} 
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局 if else if 语句 : 语句 块 n+l; 
ifelse if 多 分 支 语句 的 语法 结构 如 下 : ; 
以 上 语句 的 执行 过 程 是 ， 依 次 判断 表 


i 条 件 表达 式 1 | 
语句 块 了 达 式 的 值 。 当 某 个 分 支 的 条 件 表达 式 的 值 为 
Jelse if( 条 件 表达 式 2){ true 时 ， 则 执行 该 分 支 对 应 的 语句 块 ， 然 后 
a k 到 整个 让 语句 之 外 继续 执行 程序 。 如 果 所 
} 有 的 表达 式 均 为 false， 则 执行 语句 块 n+l1， 
a 然后 继续 执行 后 续 程序 。 
else if( 条 件 表达 式 n) { 【 例 13-6]】 
语句 块 n; 开发 一 个 用 户 登 录 模块 ， 需 要 能 判断 用 
EE jelse{ ; 户 输入 的 用 户 名 和 密码 是 否 正 确 。 以 下 是 使 
三 ; 用 站 else 站 语句 实现 的 代码 片段 。 
if (name ==" 王 名 "&& password == "123") 
3 由 
2 Console.Write(" 用 户 名 和 密码 正确 ， 登 录 成 功 ! "); 
加 else if (name ==" 王 名 "&& password != "123") 
十 
号 Console.Write(" 密码 不 正确 ， 请 重新 输入 ! "); 
< } 
w if(name !=" 王 名 "&& password == "123") 
= Console.Write(" 用 户 名 不 正确 ， 请 重新 输入 ! "); 
E22 } 
Ee 
else 
Ut 
Console.Write(" 用 户 名 和 密码 都 不 正确 ， 请 重新 输入 ! "); 
» 
属 世 if else 读 套 语句 | 语句 块 ni; 
如 果 在 过 或 者 else 子 语句 中 又 包含 了 Jelse{ 
else 语句 ， 则 称 为 谋 套 站 else 语句 ， 语 法 结 语句 块 n+1; 
构 如 下 : } 
Jelse{ 
if( 条 件 表达 式 1){ 过 
if 条件 表达 式 n){ | 国生 
串 ) 13.4.2 switch 条 件 语 名 
switch 语句 提供 了 让 语句 的 一 个 变通 形式 ， 可 以 从 多 个 语句 块 中 选择 一 个 执行 。switch 
语句 是 多 分 支 选择 语句 ， 常 用 来 根据 表达 式 的 值 选择 要 执行 的 语句 。 基 本 语法 形式 如 下 ; 
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switch( 表达 式 ) 
{ 
case 值 1: 
语句 块 1; 
break; 
case 值 2: 
语句 块 2 
break; 
case 值 n: 
语句 块 n; 
break; 
default: 
语句 块 n+1; 


switch (scoreLevel) { 
case" 优 ": 


break; 


b 


switch 语句 在 开始 处 使 用 一 个 简单 的 表 


; 达 式 ， 表 达 式 的 结果 将 与 结构 中 的 每 个 case 
| 子 句 的 值 进行 比较 。 如 果 匹 配 ， 则 执行 与 该 
: case 关联 的 语句 块 。 语句 块 以 case 语句 开始 ， 
; 以 break 语句 结尾 ， 然 后 执行 switch 语句 后 
; 面 的 语句 。 如 果 表达 式 的 结果 与 所 有 case 子 
| 句 均 不 匹配 ， 则 执行 default 后 面 的 语句 。 


【 例 13-7] 
等 级 考试 系统 将 成 绩 分 为 4 个 等 级 : 优 、 


” 良 、 中 和 差 。 现 在 要 实现 知道 等 级 之 后 ， 输 
| 出 一 个 短评 。 用 switch 语句 的 实现 如 下 : 


document.write(" 很 不 错 ， 注 意 保持 成 绩 ! "); 


break; 
case" 良 ": 


document.write(" 继续 加 油 ! ! ! "); 


break; 


case" 中" 


break; 
case" 差 ": 


document.write(" 你 是 最 棒 的 ! "); 


document.write(" 不 及 格 ， 要 努力 啦 ! "); 


break; 
default: 


document.write(" 请 确认 你 输入 的 等 级 : 优 、 良 、 中 、 差 。"); 


break; 


叫 ) 13.4.3 ”while 循环 语句 


while 语句 属于 基本 循环 语句 ， 用 于 在 指 | 
定 条 件 为 真 时 重复 执行 一 个 代码 片段 。while 代码 片段 被 执行 的 次 数 ， 当 条 件 为 假 时 跳出 
| while 循环 。 


语句 的 语法 如 下 : 
while( 表达 式 ) 
{ 
// 代码 片段 
} 


条 件 表达 式 也 是 一 个 布尔 表达 式 ， 控 制 


【 例 13-8】 
通过 循环 依次 输出 从 hl 到 h6 标题 的 字 


， 体 ， 下 面 是 使 用 while 语句 的 实现 代码 。 


1dloSeAer+SsSSI+S1WNLH 人 
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var i=1; 
whileli<7) 
{ 
document.write("<h"+i+"> 这 是 h"+i+" 号 字体 "+"</h"+i+">"); 


++i; 


叫 )》 13.4.4 do while 循环 语句 

do while 语句 的 功能 和 while 语句 类 似 ， 但 它 是 在 执行 完 第 一 次 循环 后 才 检测 条 件 表 达 式 
的 值 。 这 意味 着 包含 在 大 括号 中 的 代码 块 至 少 要 被 执行 一 次 。 另 外 ，do while 语句 结尾 处 的 
while 条 件 语句 的 括号 后 有 一 个 分 号 (;) 。 该 语句 的 基本 格式 如 下 : 


alert("while 语句 循环 执行 了 "tat" 次 "); 
执行 语句 块 2 
}while( 条 件 表达 式 ); b=b+1; 
【 例 13-9】 } 上 
下 面 通过 一 个 示例 介绍 do while 语句 的 while(j<1); 


用 法 ， 以 及 与 while 语句 的 区 别 。 


alert("do while 语句 循环 执行 了 "+b+" 次 "); 


1dUoSeAer+SsSSI+S1WLH 人 


人 在 上 述 代码 中 ， 变 量 i、j 的 初始 值 都 为 
，do while 语句 与 while 语句 的 条 件 都 是 小 
ee 于 1， 但 是 由 于 do while 语句 的 条 件 检查 放 
a 在 循环 的 未 尾 ， 因 此 大 括号 内 的 语句 执行 了 
一 次 。 
} 


叫 )》 13.4.5 for 循环 语句 

for 语句 也 类 似 于 while 语句 ， 它 在 条 件 为 真 时 重复 执行 一 组 语句 。 其 差别 在 于 ，for 语 
句 用 于 每 次 循环 之 后 更 新 变量 值 。 

for 语句 的 语法 如 下 : 


for( 初始 化 表达 式 : 循环 条 件 表达 式 ; 循环 后 的 操作 表达 式 ) 
{ 

执行 语句 块 ; 
} 


在 使 用 for 循环 前 要 先 设 定 一 个 计数 器 变量 ， 可 以 在 for 循环 之 前 预先 定义 ， 也 可 以 在 使 
用 时 直接 进行 定义 。 在 上 述 应 用 格式 中 ，“ 初 始 化 表达 式 ” 表 示 计数 器 变量 的 初始 值 ，“ 循 
环 条 件 表 达 式 ”是 一 个 计数 器 变量 的 表达 式 , 决定 了 计数 器 的 最 大 值 ; “循环 后 的 操作 表达 式 ” 
表示 循环 的 步 长 ， 也 就 是 每 循环 一 次 ， 计 数 器 变量 值 的 变化 ， 该 变化 可 以 是 增 大 的 ， 也 可 以 
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是 减 小 的 ， 或 进行 其 他 运算 。 

【 例 13-10] | 
使 用 for 语句 求 10 的 阶乘, 实现 代码 如 下 : 
var i=1,j=1; 

for(i=1;i<11;i++) 

{ 

j=j*i; 
] 


alert("10 的 阶乘 是 "+j) ; 


【 例 13-11] 


乘法 


咱 》 13.4.6 for in 循环 语句 
for in 语句 主要 用 来 罗列 对 象 属性 的 循环 


诀 表 ， 代 码 如 下 : 


方式 。 它 并 不 需要 有 明确 的 更 新 语句 ， 因 为 
循环 重复 数 是 由 对 象 属性 的 数目 决定 的 。 它 ， 


的 语法 如 下 : 


for (var 变量 in 对 象 ) 
{ 

在 此 执行 代码 ; 
} 


需要 注意 三 点 : 第 一 ， 
查 的 对 象 


些 属性 以 及 它 的 方法 就 不 会 被 列举 ;第 三 ， 


咱 》13.4.7 ”对 话 框 语句 


使 用 for 语句 的 找 套 形式 实现 打印 九 九 | 


for in 循环 中 所 检 | 
属性 并 不 是 按照 可 预测 的 顺序 来 进 ; 
行 的， 第 二 ， 它 只 能 列举 用 户 自 定义 对 象 的 ; 
属性 ， 包 括 任 何 继承 属性 ， 但 内 置 对 象 的 一 | 


var i=1 
var j=1 
for(i=1;i<10;i++) 
{ 
for(j=1;j<=i;j++) 
{ 
document.write(j+"*"+i+"="+(i*j)+ 
"&nbsp;&nbsp;"); 
} 
document.write("</br>") 


} 


i for in 循环 不 能 列举 出 未 定义 ， 也 就 是 没有 默 
认 值 的 文本 域 。 

【 例 13-12] 
| 下 面 用 for in 循环 输出 数组 中 的 元 素 。 
| 代码 如 下 : 


var myArray = new Array(); 
myArray [0] = "for"; 
myArray [1] = "for in"; 
myArray [2] = "hello"; 
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for (var a in myArray) 
了 

document.write(myArray [a] + "<br />"); 
上 


前 面 已 经 多 次 用 到 了 消息 对 话 框 ， 给 上 


息 对 话 框 :警告 对 话 框 、 确 认 对 话 框 和 提示 对 话 框 。 本 小 节 将 依次 对 这 三 种 消息 对 话 框 进行 


详细 的 介绍 。 
警告 对 话 杠 
警告 对 话 框 经 常用 了 


alert(" 文 本 "); 


确保 用 户 可 以 得 到 某 
定 ”按钮 才能 继续 进行 操作 。 警 告 对 话 框 的 语法 如 下 : 


户 传递 信息 。 在 JavaScript 中 ， 可 以 创建 三 种 消 


些 信息 。 警 告 对话 框 出 现 后 ， 用 户 需要 单 
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【 例 13-13]】 


{ 
判断 一 个 数字 的 奇偶 性 ， 并 使 用 警告 对 alert(it" 是 偶数 ! 路 
话 框 显示 判断 结果 ， 代 码 如 下 : } 
else{ 
<script type="text/javascript"> alert(i#" 是 奇数 ! 路 ; 
var i=11; } 
if(i%2==0) i 


多 要!5 
| 如 果 在 警告 对 话 框 中 显示 的 文本 信息 比较 长 ， 为 了 美观 ， 可 以 使 用 JavaScript 中 的 转 义 符 “Wn” 
| 对 文本 信息 进行 换行。 | 


革 确认 对 话 框 

确认 对 话 框 用 于 验证 或 者 接受 某 些 信息 。 当 确认 对 话 框 出 现 后 ， 用 户 根据 确认 对 话 框 提示 
的 信息 选择 单 击 “ 确 认 ” 或 者 “取消 ”按钮 才 可 以 继续 进行 操作 。 如 果 用 户 单 击 “确定 ”按钮 ， 
那么 返回 值 为 tue;， 如果 用 户 单 击 “取消 ”按钮 ， 那 么 返回 值 为 false。 确 认 对 话 框 的 语法 如 下 : 


confirm(" 文本 "); 


【 例 13-14] 
下 面 将 通过 一 个 具体 实例 来 分 析 确 认 对 话 框 的 具体 应 用 ， 代 码 如 下 : 


<html> 

<head> 

<title> 使 用 confirm 语句 </title> 
<script type="text/javascript"> 


2 
一 
三 
Fa 
a 
+ 

OO 
nN 
0 
[oo 
十 

人 一 
ov 

< 

v9 

0 
Oo 

三 : 
5 

[a 


function disp_confirm() 


{ 
var r=confirm(" 请 选择 确认 或 者 取消 "); 
if (r==true) 
{ 
alert(" 您 选择 了 确认 ") 
} 
else 
{ 
alert(" 您 选择 了 取消 ") 
} 
i 
</script> 
</head> 
<body> 
<input type="button" onclick="disp_confirm()" value=" 单 击 这 里 "/> 
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</body> 
</html> 


在 上 述 语 句 
中 ， 使 用 过 else 语 
句 对 用 户 选择 的 操 
作 进 行 判 断 ， 并 
使 用 警告 对 话 框 
输出 用 户 的 选择 ， 
当然 也 可 以 定义 
其 他 复杂 的 操作 
具体 的 效果 如 
图 13-4 所 示 。 


图 13-4 确认 对 话 框 


二 提示 对 话 杠 

提示 对 话 框 经 常用 于 提示 用 户 在 进入 页 面前 输入 某 个 值 。 出 现 提示 框 后 ， 用 户 需要 输入 
一 个 值 ， 然 后 单 击 “ 确 定 ” 或 者 “取消 ”按钮 才能 继续 操作 。 如 果 用 户 单 击 “ 确 定 ” 按 钮 ， 
那么 返回 值 为 用 户 输入 的 值 ， 如 果 用 户 单 击 “ 取 消 ” 按 钮 ， 那 么 返回 值 为 null。 提 示 对 话 杠 
的 语法 如 下 : 


prompt(" 文本 "," 默认 值 人 


【 例 13-15】 
下 面 将 使 用 提示 对 话 框 创建 一 个 示例 ， 代 码 如 下 : 


1dl13SeABr+ESSI+9T1W1H 人 


<html> 

<head> 

<title> 使 用 prompt 语句 </title> 

<script type="text/javascript"> 

function disp_prompt() 
{ 
var name=prompt(" 请 输入 你 的 姓名 ",""); 
var sex=prompt(" 请 输入 你 的 性 别 "," 男 "); 


if(namel=null&& name!="") 


{ 
if(sex==" 男 ") 
{ 
var str=name+" 先生 您 好 ! \n\n 今天 天 气 不 错 ， 希 望 您 玩 得 开心 "; 
alert(str); 
由 
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{ 
var str=name+" 女士 您 好 ! \n\n 今天 天 气 不 错 ， 希 望 您 玩 得 开心 "; 
alert(str); 
} 
} 
} 
</script> 
</head> 
<body> 
<input type="button" onclick="disp_prompt()" value=" 单 击 这 里 " /> 
</body> 
</html> 


在 上 述 代 码 中 ， 使 用 了 两 个 提示 对 话 框 ， 分 别 让 用 户 输入 姓名 和 性 别 信 息 ， 然 后 根据 用 
户 的 输入 选择 不 同 的 问候 语 ， 如 图 13-5 所 示 。 


个 E\WWW\testS.html 
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图 13-5 使 用 提示 对 话 框 


Q7]) 13.5 函数 


在 JavaScript 语言 中 ， 函 数 是 一 个 既 重 要 又 复杂 的 部 分 。JavaScript 函数 可 以 封装 在 程序 
中 可 能 要 多 次 用 到 的 模块 ， 并 可 作为 事件 驱动 的 结果 来 调用 程序 ， 从 而 实现 一 个 函数 与 相应 
的 事件 驱动 相关 联 。 
咱 ) 13.5.1 系统 函数 

JavaScript 中 提供 了 一 些 内 部 函数 ， 也 称 为 系统 函数 、 内 部 方法 或 内 置 函 数 等 。 这 些 
函数 与 任何 对 象 无 关 ， 在 程序 中 可 以 直接 调用 来 完成 某 些 功 能 。 表 13-7 列 出 了 常用 的 系 
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表 13-7 常用 的 系统 函数 
函数 名 称 说 明 
evalO 返回 字符 囊 表达 式 中 的 值 
parseInt() 返回 不 同 进 制 的 数 ， 默 认 是 十 进 制 ， 用 于 将 一 个 字符 串 按 指定 的 进 制 转 换 成 一 个 整数 
parseFloat() | 返回 实数 ， 用 于 将 一 个 字符 囊 转换 成 对 应 的 小 数 
escape() 返回 对 一 个 字符 囊 进 行 编码 后 的 结果 字符 囊 


encodeURIO | 返回 一 个 对 URI 字符 事 编 码 后 的 结果 也 
decodeURIO | 将 一 个 已 编码 的 URI 字符 囊 解码 成 原始 的 字符 囊 返 回 
unescape () 将 一 个 用 escape 方法 编码 的 结果 字符 事 解 码 成 原始 字符 事 并 返回 
检测 parseInt() 和 parseFloat() 函数 返回 值 是 否 为 非 数 值 型 ， 如 果 是 返回 tue， 否 则 返 三 
ISNaNO 

回 false I 

ol 

abs(x) 返回 X 的 绝对 值 忆 
acos(x) 返回 X 的 反 余弦 值 ( 余 强 值 等 于 X 的 角度 )， 用 约 度 表示 [9p) 
asin(x) 返回 X 的 反正 强 值 i 
atan(x) 返回 X 的 反正 切 值 2 
ceil(x) 返回 大 于 或 等 于 X 的 最 小 整数 吕 
cos(x) 返回 X 的 余弦 DD 
exp(x) 返回 e 的 XxX 次 需 (ex) 9 
floor(x) 返回 小 于 或 等 于 Xx 的 最 大 整数 E24 
log(x) 返回 X 的 自然 对 数 (In x) 


max(a,b) 返回 a、b 中 较 大 的 数 

min(a,b) 返回 a、b 中 较 小 的 数 

pow(mm) ”| 返回 的 mm 次 轨 

random() 返回 大 于 0 小 于 1 的 一 个 随机 数 
round(x) 返回 X 四 舍 五 入 后 的 值 


sin(x) 返回 X 的 正弦 
sqrt(x) 返回 X 的 平方 根 
tan(x) 返回 X 的 正切 
。 用 法 : < 对 象 >toString0; 把 对 象 转 换 成 字符 事 。 如 果 在 括号 中 指定 一 个 数值 ， 则 转 
(Sang0 | 换 过 程 中 所 有 数值 被 转换 成 特定 进 抽 
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这 里 需要 说 明 的 是 ， 系 统 函 数 不 需 要 创建 ， 也 就 是 说 ， 用 户 可 以 在 任何 需要 的 地 方 调用 
它们 ， 如 果 函 数 有 参数 还 需要 在 括号 中 指定 传递 的 值 。 
叫 )》 13.5.2 ” 自 定义 函数 


在 JavaScript 中 定义 一 个 函数 必须 以 function 关键 字 开 头 ， 函 数 名 跟 在 关键 字 的 后 面 ， 接 
着 是 函数 参数 列表 和 函数 所 执行 的 程序 代码 段 。 定 义 函数 的 格式 如 下 : 


function 函数 名 (参数 列表 ) : <html> 
{ | <head> 
区 程序 代码 ; | <title> 定义 函数 </title> 
return 表达 式 ; : </head> 
a } | <body> 
| : <script type="text/javascript"> 
三 在 上 述 格式 中 ， 参 数列 表 表示 在 程 // 由 于 该 函数 没有 return 语句 ， 所 以 它 没有 
辆 序 中 调用 某 个 函数 时 传递 给 函数 的 某 种 ， 和 返回 值 
+ 类 型 的 值 或 变量 。 如 果 这 样 的 参数 多 于 : function Message(msg) 
[@】 一 个 ， 那 么 两 个 参数 之 间 需 要 用 逗号 隔 : { 
7】 开 。 虽 然 有 些 函 数 并 不 需要 接 收 任何 参 | document.write(msg,'<br/>"); 
全 数 ， 但 在 定义 函数 时 也 不 能 省 略 函 数 名 后 】 
。 面 的 小 括号 ， 保 留 小 括号 中 的 内 容 为 空 。。””// 该 本 数 是 计算 三 个 数 的 和 
人 一 即 可 。 : function Sum(a,b,c) 
名 另外 ， 函 数 中 的 程序 代码 必须 位 于 | 
v9 一 对 大 括号 之 间 ， 如 果 主 程序 要 求 返回 | return at+b+c; 
EE 一 个 结果 集 ， 就 必须 使 用 reum 语句 。 } 
= 当然 ,retum 语句 后 也 可 以 跟 一 个 表达 | Message("Hello World"); 
5 式 ， 返 回 值 将 是 表达 式 的 运算 结果 。 如 | Message(" 三 个 数 的 和 是 : "+Sum(1,2,3)); 
同类 果 在 函数 程序 代码 中 省 略 retum 语句 后 | </script> 
面 的 表达 式 ， 或 者 函数 结束 时 没有 retum | </body> 
语句 ， 这 个 函数 就 返回 一 个 undefined | </html> 
的 值 。 
【 例 13-16】 | 函数 定义 好 以 后 ， 可 以 直接 调用 。 在 上 


下 面 通过 示例 演示 如 何 定义 函数 。 在 该 : 述 代码 中 ， 分 别 为 Message() 和 Sum() 函数 传 
例 中 定义 两 个 函数 Message() 和 Sum0， 由 于 ; 递 参数 , 然后 将 代码 保存 为 "调用 函数 .html”， 
在 Message() 函数 中 没有 retum 语句 ， 所 以 没 : 双击 并 打开 后 ， 可 以 在 页 面 中 看 到 两 条 输出 
有 返回 值 ， 在 Sum() 函数 中 ， 使 用 retum 语 ;语句 ， 如 下 所 示 ; 
句 返 回 三 个 数 相 加 的 和 ， 具体 实 现代 码 如 下 : | 


Hello World 
三 个 数 的 和 是 : 6 
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Qj) 13.6 常用 对 象 


JavaScript 提供 了 内 置 的 对 象 以 实现 特定 的 功能 ， 其 常用 对 象 有 数组 对 象 、 窗 体 对 象 和 
DOM 对 象 等 。 本 节 详 细 介绍 JavaScript 内 置 对 象 的 使 用 。 


1 》13.6.1 Array 对 和 象 


Array 对 象 是 JavaScript 中 的 数组 对 象 ， 
实现 数组 的 相关 操作 。 数 组 允许 在 单个 变量 
中 存储 多 个 值 ， 其 创建 语法 如 下 : 


i 该 构造 函数 将 返回 具有 指定 个 数 、 元 素 为 
undefined 的 数组 。 当 其 他 参数 调用 ArrayO 时 ， 
交 构 造 函数 将 用 参数 指定 的 值 初 始 化 数组 。 
当 把 构造 函数 作为 函数 调用 ， 不 使 
ew 运算 符 时 ， 它 的 行为 与 使 用 new 运算 符 
调用 它 时 的 行为 完全 一 样 。 
Array 对 象 有 以 下 三 个 属性 。 
e@ constructor 返回 对 创建 此 对 象 的 数 


new Array(); 


new Array(size); 
new Array(element0, element1, ..., elementn); 


上 述 代 码 中 ， 参 数 size 是 期 望 的 数组 元 


组 函数 的 引用 。 
素 个 数 ， 参 数 element 是 参数 列表 。 当 使 用 length ”设置 或 返回 数组 中 元 素 的 
这 些 参数 来 调用 构造 函数 Array0 时 ， 新 创建 ”数量 。 ™ 

的 数组 的 元 素 就 会 被 初始 化 为 这 些 值 ， 它 的 。 prototype 使 开发 人 员 有 能 力 为 对 象 
长 度 (元素 数量 ) 也 会 被 设置 为 参数 的 个 数 。 ee 


调用 构造 函数 Array() 时 ， 如 果 没 有 使 用 
参数 ， 那 么 返回 的 数组 为 空 ， 元 素数 量 为 0。 
当 调 用 构造 函数 时 只 传递 给 它 一 个 数字 参数 ， 


表 13-8 Array 对 象 的 方法 


方法 名 称 说 明 


实现 Array 对 象 对 数组 的 操作 ， 其 包括 
的 方法 如 表 13-8 所 示 。 


concat() 连接 两 个 或 更 多 的 数组 ， 并 返回 结果 

join0 把 数组 的 所 有 元 素 放 入 一 个 字符 事 元 素 中 ， 并 通过 指定 的 分 隔 符 进行 分 隔 
popO 删除 并 返回 数组 的 最 后 一 个 元 素 

pushO 在 数组 的 末尾 添加 一 个 或 更 多 元 素 ， 并 返回 新 的 长 度 
reverse(Q) 站 倒数 组 中 元 素 的 顺序 

shiftO 删除 并 返回 数组 的 第 一 个 元 素 

slice0 从 某 个 已 有 的 数组 返回 选 定 的 元 素 

sortO 对 数组 的 元 素 进行 排序 

spliceO 删除 元 素 ， 并 在 数组 中 添加 新 元 素 

toSource0 返回 该 对 象 的 源 代 码 

toString0 把 数组 转换 为 字符 事 ， 并 返回 结果 

toLocaleString() 把 数组 转换 为 本 地 数组 ， 并 返回 结果 
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说 明 
在 数组 的 开头 添加 一 个 或 更 多 元 素 ， 并 返回 新 的 长 度 
valueOf() 返回 数组 对 象 的 原始 值 


川 ) 13.6.2 Document 对 和 象 


Document 对 象 使 设计 人 员 可 以 通过 脚本 对 HIML 页 面 中 的 元 素 进 行 访 问 。Document 对 
是 Window 对 象 的 子 对 象 ， 可 通过 window.document 属性 对 其 进行 访问 。 
Document 对 象 可 以 控制 页 面 中 的 元 素 ， 也 可 以 对 多 个 元 素 统一 处 理 。 对 多 个 元 素 统一 处 
理 需 要 使 用 集合 ， 其 包含 的 集合 如 表 13-9 所 示 。 
表 13-9 Document 对 象 的 集合 


EE 

一 

三 

FE 

人 集合 名 称 说 明 
(@) all[] 提供 对 文档 中 所 有 HTML 元 素 的 访问 
六 anchors[] 返回 对 文档 中 所 有 Anchor 对 象 的 引用 
si applets 返回 对 文档 中 所 有 Applet 对 象 的 引用 
ry forms[] 返回 对 文档 中 所 有 Form 对 象 的 引用 
局 images[] 返回 对 文档 中 所 有 Image 对 象 的 引用 
0 links[] 返回 对 文档 中 所 有 Area 和 Link 对 象 的 引用 
4 

5 

一 


HTML Document 接 口 对 DOM Document 接 口 进行 了 扩展 , 定义 HIML 专用 的 属性 和 方法 。 
很 多 属性 和 方法 都 是 HIML Collection 对 象 拥有 的 ， 其 中 保存 了 对 锚 、 表 单 、 链 接 以 及 
其 他 脚本 元 素 的 引用 。 其 常用 属性 和 方法 如 表 13-10 和 表 13-11 所 示 。 
表 13-10 _ Document 对 象 的 属性 


属性 名 称 说 明 

viiy 提供 对 <body> 元 素 的 直接 访问 ， 对 于 定义 了 框架 集 的 文档 ， 该 属性 
引用 最 外 层 的 <frameset> 

cookie 设置 或 返回 与 当前 文档 有 关 的 所 有 Cookie 

domain 返回 当前 文档 的 域名 

lastModified 返回 文档 被 最 后 修改 的 日 期 和 时 间 

Teferer 返回 载 入 当前 文档 的 URL 

title 返回 当前 文档 的 标题 

URL 返回 当前 文档 的 URL 
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表 13-11 Document 对 象 的 方法 


方法 名 称 说 明 
close0 关闭 用 document.open0 方法 打开 的 输出 流 ， 并 显示 选 定 的 数据 
getElementByIdO 返回 对 拥有 指定 id 的 第 一 个 对 象 的 引用 
getElementsByName() 返回 带 有 指定 名 称 的 对 象 集合 
getElementsByTagName() 返回 带 有 指定 标签 名 的 对 象 集合 


open() 


write() 


打开 一 个 流 ， 以 收集 来 自任 何 document.write() 或 document.writeln() 
方法 的 输出 
在 文档 中 写 HTML 表达 式 或 JavaScript 代码 


writeln() 


等 同 于 write0 方法， 不 同 的 是 ， 在 每 个 表达 式 之 后 写 一 个 换行 符 


在 文档 载 入 和 解析 的 时 候 ，write() 方法 允许 脚本 在 文档 中 插入 动态 生成 的 内 容 。 


叫 ) 13.6.3 Window 对 象 


Window 对 象 表示 一 个 浏览 器 窗口 或 一 个 框架 。 在 客户 端的 JavaScript 中 ，Window 对 象 
是 全 局 对 象 ， 所 有 的 表达 式 都 在 当前 的 环境 中 计算 。 也 就 是 说 ， 要 引用 当前 窗口 根本 不 需要 


特殊 的 语法 ， 可 以 把 窗 


的 属性 作为 全 局 变量 来 使 用 。 例 如 ， 可 以 只 写 document， 而 不 必 写 


成 window.document。 同 样 ， 可 以 把 当前 窗口 对 象 的 方法 当 作 函数 来 使 用 ， 如 只 写 alert0， 而 
不 必 写 成 Window.alert()。Window 对 象 的 常用 方法 如 表 13-12 所 示 。 


表 13-12 Window 对 象 的 方法 


方法 名 称 说 明 
alert() 显示 带 有 一 段 消 息 和 一 个 “确定 ”按钮 的 警告 框 
blur0 把 键盘 焦点 从 顶层 窗口 移 开 
clearInterval() 取消 由 setInterval0 方法 设置 的 timeout 
clearTimeout() 取消 由 setTimeout( 方法 设置 的 timeout 
close0 关闭 浏览 器 窗口 
confirm() 显示 带 有 一 段 消息 以 及 “确定 ”按钮 和 “取消 ”按钮 的 对 话 框 
createPopupO) 创建 一 个 pop-up 窗口 
focus0) 把 键盘 焦点 给 予 一 个 窗口 
moveByO 可 相对 窗口 的 当前 坐标 移动 指定 的 像素 
moveTo0 把 窗口 的 左上 角 移 动 到 一 个 指定 的 坐标 
open() 打开 一 个 新 的 浏览 器 窗口 或 查找 一 个 已 命名 的 窗口 
printO 打印 当前 窗口 的 内 容 
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( 续 表 ) 
方法 名 称 说 明 
prompt() 显示 可 提示 用 户 输入 的 对 话 框 
resizeBy(O) 按照 指定 的 像素 调整 窗口 的 大 小 
resizeTo() 把 窗口 的 大 小 调整 到 指定 的 宽度 和 高 度 
scrollByO 按照 指定 的 像素 值 滚动 内 容 
scrollTo() 把 内 容 滚动 到 指定 的 坐标 
setIntervalO) 按照 指定 的 周期 〈 以 毫秒 计 ) 调用 函数 或 计算 表达 式 
setTimeoutO 在 指定 的 毫秒 数 后 调用 函数 或 计算 表达 式 


除了 表 13-12 所 列 的 方法 外 ，Window 对 象 还 实现 了 核心 JavaScript 定义 的 所 有 全 局 属性 
和 方法 。 

Window 对 象 的 window 属性 和 self 属性 引用 的 都 是 它 自己 。 当 明确 地 引用 当前 窗口 ， 而 
不 仅仅 是 隐 式 地 引用 它 时 ， 可 以 使 用 这 两 个 属性 。 除 了 这 两 个 属性 之 外 ，parent 属性 、top 属 
性 以 及 frame[] 数组 都 引用 与 当前 Window 对 象 相关 的 其 他 Window 对 象 。 

新 的 项 层 浏览 器 窗口 由 方法 Window.open0( 创建 。 当 调用 该 方法 时 ， 应 把 open( 调用 的 
返回 值 存 储 在 一 个 变量 中 ， 然 后 使 用 那个 变量 来 引用 新 窗口 。 新 窗口 的 opener 属性 反 过 来 引 
用 打开 它 的 那个 窗口 。 

一 般 来 说 ，Window 对 象 的 方法 都 是 对 浏览 器 窗口 或 框架 进行 某 种 操作 。 而 alert( 方法 、 
confirm() 方法 和 prompt 方法 则 不 同 ， 它 们 通过 简单 的 对 话 框 与 用 户 进行 交互 。 


7 13.7 ”实践 案例 : 长 方 体 几 何 计算 


本 章 全 面 讲述 了 JavaScript 的 基础 知识 ， | 实现 上 述 要 求 的 步骤 如 下 。 
包括 JavaScript 中 的 语法 规则 、 语 句 、 变 量 、 加 中 创建 长 方 体 计算 函数 ， 由 长 方 体 的 
运算 符 、 对 象 和 函数 等 。 本 节 结 合 本 章 内容 ， ; 长 、 宽 和 高 3 个 参数 ， 在 函数 中 计算 获取 长 
创建 长 方 体 函 数 并 对 其 进行 实例 化 。 具 体 要 ; 方 体 的 体积 属性 值 和 表面 积 属性 值 ， 函 数 代 
求 如 下 。 码 如 下 : 

@ 创建 长 方 体 计算 函数 ， 有 长 方 体 的 长 、 

宽 和 高 3 个 参数 。 
® 在 函数 中 计算 获取 长 方 体 的 体积 属性 


<script> 
function boxes(l w h) { 


值 和 表面 积 属性 值 。 Ee = 
@ 创建 长 4、 宽 3、 高 2 的 长 方 体 和 长 宽 thisw= w; 
高 均 为 3 的 正方 体 。 thish =h; 
®@ 计算 长 方 体 和 正方 体 的 表面 积 和 体积 并 this.area =2* (|*+w+l*h+w*h); 
输出 。 thisvolume =1*# h* w; 
@ 判断 长 方 体 和 正方 体 的 体积 大 小 并 : } 
输出 。 | </script> 
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网 加 创建 长 4、 宽 3、 高 2 的 长 方 体 和 长 宽 高 均 为 3 的 正方 体 ， 计 算 长 方 体 和 正方 体 的 表 
面积 和 体积 并 输出 ， 代 码 如 下 ; 


var box1 = new boxes(2, 3, 4); 
document.write(" 长 方 体 表 面积 : "+ box1l.area + "<br/>"); 
document.write(" 长 方 体 体积 : "+ boxl.volume + "<br/>"); 
Var box2 = new boxes(3, 3, 3); 
document.write(" 正方 体 表 面积 : "+ box2.area + "<br/>"); 
document.write(" 正方 体 体积 : "+ box2.volume + "<br/>"); 


罗 结 判断 长 方 体 和 正方 体 的 体积 大 小 并 输出 ， 代 码 如 下 : 


if (box1.area > box2.area) 


{ 
document.write(" 长 方 体 体积 较 大 "); 
} 
else if (box1.area == box2.area) 
{ 
document.write(" 体积 一 样 大 "); 
} 
else 
{ 
document.write(" 正方 体 体积 较 大 "); 
} 


大 鸡 运行 上 述 代 码 ， 其 执行 效果 如 图 13-6 所 示 。 
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图 13-6 长方体 几何 计算 


Qu7) 13.8 练习 题 


一 、 填 空 题 
1，JavaScript 中 的 多 行 注释 以 符号 “/*” 开 头 ， 并 以 “ ”结尾 。 
2. 假设 要 将 外 部 的 libjs 文件 引入 当前 页 面 ， 应 该 使 用 语句 5 
3. 假设 要 声明 一 个 变量 需要 使 关键 字 。 
4. 表达 式 “1+2*3” 的 结果 是 
5. 通过 使 用 属性 可 以 获取 数组 中 元 素 的 数量 。 
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二 、 选 择 题 
1. 下 列 关 于 JavaScript 语言 特点 的 描述 ， 不 正确 的 是 
A. 简单 性 B. 面向 对 象 
C. 动态 性 D. 跨 平 台 性 
2. 下 列 关于 JavaScript 语法 的 描述 ， 不 正确 的 是 
A. 不 区 别 大 小 写 
B， 标 识 符 不 能 以 数字 开头 
C. 内 置 对 象 通常 是 首 字母 大 写 
区 D. 一 行 可 以 放 多 个 语句 
3. 下 列 不 属于 JavaScript 数据 类 型 的 是 
A. number B. integer 
2 C. string D. null 
4 下 列 代码 执行 后 ， 变 量 i 的 值 是 
是 var i=0,j=1; 
十 for(j=1;j<10;i++) 
OO { 
0 i=j*i; 
0 } 
@ 
十 
De A. 5050 B. 1 
< C. 55 D. 0 
网 < 上 机 练习 1: 输出 直角 梯形 
必 
志 使 用 一 种 符号 ， 如 @、#、* 或 $ 等 ， 输 出 一 个 直角 梯形 。 要 求 在 梯形 每 一 行 的 中 间 位 置 


使 用 另 一 种 符号 ， 达 到 如 图 13-7 所 示 的 效果 。 


| locelhost3196/ HenPoc x Ne 
| © 日 localhost3196/HtmlPage3.html 


图 13-7 直角 梯形 运行 效果 


上 机 练习 2: 求 阶乘 


创建 一 个 用 户 自 定义 函数 ， 该 函数 带 有 一 个 参数 用 于 指定 求 阶乘 的 数 。 例 如 ， 求 10 的 阶 
乘 的 公式 如 下 : 


10!=1*2*3*4*5*6*7*8*9*10 


创建 一 个 函数 用 于 统计 阶乘 之 和 ， 例 如 计算 5 的 阶乘 之 和 的 公式 如 下 : 


1!+2!+31+41+51 
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JavaScript 最 主要 的 作用 就 是 允许 开发 者 在 页 面 和 浏览 器 之 间 进 行 交互 。 为 此 ， 
Javascript 提供 了 事件 模型 来 响应 用 户 操作 和 改变 浏览 器 的 行为 。 另 外 ， 通 过 DOM 可 以 快速 
地 修改 页 面 节点 的 内 容 、 增 加 节点 和 删除 节点 。 

本 章 从 事件 的 概念 开始 介绍 ， 讲 解 原始 事件 模型 和 标准 事件 模型 ， 以 及 JavasScript 常用 
事件 。 然 后 介绍 DOM 接口 ， 以 及 对 节点 的 遍历 、 插 入 、 复 制 、 蔡 换 和 删除 等 操作 。 


\ 必 | 本章 学 习 要 点 
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7 14.1 事件 概述 


事件 是 浏览 器 响应 用 户 交 互 操作 的 一 种 机 制 。 事 件 的 处 理 过 程 是 : 发 生 事件 一 启动 事件 
处 理 程序 一 事件 处 理 程序 做 出 响应 。 如 果 要 启动 事件 处 理 程 序 ， 就 必须 告诉 对 象 ， 如 果 发 生 
了 什么 事情 ， 就 要 启动 什么 处 理 程序 ， 否 则 这 个 流程 就 不 能 进行 下 去 。 事 件 的 处 理 程序 可 以 
是 任意 的 JavaScript 语句 ， 但 是 一 般 使 用 自 定义 函数 来 处 理 。 


串 )》 14.1.1 事件 简介 


JavaScript 是 基于 对 象 的 语言 ， 这 与 Java | 例如 documentforms[0].submitO 。 
和 C# 等 语言 不 同 ，Java 是 面向 对 象 的 编程 ; e@ 使 用 诸如 正 浏览 器 的 freEventO 这 样 
语言 。 基 于 对 象 的 基本 特征 ， 就 是 采用 事件 : 的 方法 显 式 触发 。 
驱动 。JavaScript 适用 于 图 形 界 面 的 环境 , 使 ; e@ 由 JavaScript 使 用 DOM 的 dispatchEvent0 
得 一 切 输入 变 得 简单 化 。 通 过 鼠标 或 者 热 键 ; 方法 显 式 触 发 。 


的 动作 称 为 事件 ， 由 鼠标 或 者 热 键 引发 的 ， 
一 连 中 程序 的 动作 ， 称 为 事件 驱动 1 而 对 ”I 使 用 事件 的 和 和 
事件 进行 处 理 的 程序 或 者 函数 ， 称 为 事件 ; ” ”事件 定义 了 用 户 与 页 面 交 互 时 产生 的 各 
处 理 程序 。 ， 种 操作 ， 使 用 事件 有 以 下 几 种 途径 。 

| e@ ”使 用 传统 的 XHTML 事件 处 理 器 属性 ， 
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区 触发 事件 的 途径 : 如 <form onsubmit="myFunctionO0:">。 

事件 不 仅 可 以 在 用 户 交互 过 程 中 产生 ， ; e@ 被 关联 至 某 个 对 象 ， 如 document. 
而 且 浏 览 器 自身 的 一 些 动作 也 可 以 产生 事件 。; getElementById("myForm").onsubmit = 
例如 ， 当 加 载 一 个 页 面 时 会 触发 load 事件 ， | myFunction。 
扼 载 一 个 页 面 时 会 触发 unload 事件。 总 体 来 : e@ 使 用 诸如 正 浏 览 器 的 attEvent0 私有 
说 ， 触 发 事件 有 以 下 几 种 途径 。 : 方法 。 

e@ 对 由 用 户 引发 或 者 JavaScript 引发 的 动 : ”使 用 标准 DOM 的 内 置 方法 ， 例 如 使 用 

作 进 行 响 应 ， 由 浏览 器 隐 式 触发 。 | 一 个 节点 的 addEventListener() 方法 来 
@ 由 JavaScript 使 用 DOM 方法 显 式 触发 ，; 设置 事件 监听 器 。 


叫 ) 14.1.2 ”指定 事件 
事件 处 理 程序 一 般 分 为 事件 源 和 事件 处 理 者 。 事 件 源 即 触发 事件 的 源头 ， 每 一 个 HIML 
标记 都 可 以 成 为 触发 事件 的 条 件 ， 事 件 处 理 者 处 理事 件 的 JavaScript 脚本 程序 ， 即 处 理 对 该 
事件 做 出 响应 的 语句 。 当 移动 鼠标 或 者 敲 击 键盘 时 都 可 能 触发 事件 ， 将 一 个 事件 源 指 定 到 事 
件 处 理 者 可 以 通过 三 种 方法 。 
区 直接 在 HTML 的 标记 中 指定 
直接 在 HIML 标记 中 指定 事件 源 是 使 用 最 普遍 的 一 种 方式 。 基 本 语法 如 下 : 
< 标记 事件 =" 事件 处 理 程序 "[ 事件 =" 事件 处 理 程序 "] .…]> 


【 例 14-1] 
创建 一 个 HIML 页 面 ， 为 body 标记 指定 onload 事件 属性 和 onUnload 事件 属性 ， 实 现在 
页 面 读 取 完 毕 时 弹出 “网 页 读 取 完 成 ”提示 对 话 框 。 在 用 户 退出 文件 、 关 闭 窗口 或 者 打开 另 
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第 14 章 JavaScript 事件 和 DOM 
一 个 页 面 时 弹出 “网 页 即将 关闭 ”提示 对 话 框 。 代 码 如 下 : 
<body onLoad="alert(' 网 页 读 取 完成 ')" onUnload="alert(' 网 页 即将 关闭 )"> 


区 在 JavaScript 脚本 中 指定 

在 JavaScript 脚本 中 指定 事件 的 基本 语 | 本 
法 如 下 : | Jelse{ 

< 事件 主角 -对 象 >< 事 件 >=< 事 件 处 理 程序 >; lm lope 

: b 

其 中 , “事件 处 理 程序 ”是 真正 的 代码 ， : } 

而 不 是 字符 串 形式 的 代码 。 | window.onload = getHelloSsay("admin"); 
【 例 14-2] : 
创建 一 个 实例 ， 将 getHelloSay0 函数 定 : 如 果 事 件 处 理 程序 是 一 个 自 定义 函数 ， 


义 为 window 对 象 onload 事件 的 处 理 程序 ， 在 没有 使 用 参数 的 需要 时 ， 就 不 需要 加 小 括 
实现 的 效果 是 页 面 加 载 完毕 后 判断 传 入 的 参 ， 号。 代码 如 下 : 
数 名 是 否 为 admin。 代 码 如 下 : : - 

window.onload = function(){ 


function getHellosay(name){ | alert("hello"); 
if(name=="admin"){ | } 


生 编写 特定 对 象 、 特 定 事件 的 JavaScript 脚本 
这 种 方式 使 用 得 少 ， 但 是 在 某 些 场合 会 被 用 到 。 基 本 语法 如 下 : 


<script language="JavaScript" for=" 对 象 "event=" 事件 "> 
// 事件 处 理 程序 代码 


</script> 
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【 例 14-3] 
本 例 完成 页 面 加 载 时 弹出 一 个 提示 对 话 框 的 效果 。 代 码 如 下 : 


<script language="javascript" for="window" event="onload"> 
alert(" 欢迎 光临 "); 
</script> 


7) 14.2 原始 事件 模型 


原始 事件 模型 是 最 简单 的 一 种 事件 处 理 方式 ， 即 基本 事件 处 理 。 实 际 上 ， 在 前 面 的 章 
节 中 已 经 多 次 用 到 。 例 如 ， 按 钮 的 click 事件 处 理 程序 就 是 在 单 击 时 触发 ， 具 有 该 事件 的 还 
有 HIML 中 的 a 标记 、body 标记 和 imsg 标记 等 ， 它 们 都 是 原始 事件 模型 。 本 节 将 详细 了 解 
JavaScript 中 的 原始 事件 模型 。 
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吓 》14.2.1 事件 类 型 
在 原始 事件 模型 中 ， 事 件 是 浏览 器 内 置 的 ， 事 件 类 型 是 指 响应 事件 调用 的 处 理 程序 名 称 。 
在 这 种 模型 中 ， 通 常 使 用 HTML 标记 的 事件 属性 来 设置 事件 处 理 代 码 。 表 14-1 中 列 出 了 常 
用 的 事件 属性 ， 并 对 这 些 属 性 的 触发 条 件 和 支持 标记 进行 了 介绍 。 
表 14-1 常用 的 事件 处 理 属性 


事件 名 称 事件 说 明 支持 标记 
也 onabort 图 像 装载 被 中 断 时 <img> 
Wr 标记 失去 焦点 时 <button>、<input>、<label>、 
<select>、<textarea>、<body> 
mm | 选择 oe 标记 中 的 地 江 或 者 其 他 表单 标记 失 <input>、<label>、<select>、 
三 onchange 去 了 焦点 ， 并 且 由 于 它 获得 了 焦点 而 使 值 发 生 了 
武将 <textarea> 
广 
a 和 
. 筷 标 按 下 并 释放 ， 发 生 在 mouseup 事件 后 。 如 果 
证 5 标 
© onclick 返回 和 lse， 则 可 以 取消 对 认 动 作 大 多 数 标记 
0 ondbclick 双击 鼠标 时 大 多 数 标记 
ye onerror 在 装载 图 像 的 过 程 中 发 生 了 错误 时 <img> 
于 itis 标记 得 到 输入 焦点 时 <button>、<input>、<label>、 
< <select>、<textarea>、<body> 
已 > ~ | 中 可 了 pk 
0 oe fig 如 果 返 回 false， 则 可 以 取消 默 表单 元 素 、<body> 
0 
~ a a a 
onkeypress ete a 各 系 泛 加 和 Be， 出 可 以 表单 元 素 、<body> 
A 鱼 盘 鱼 被 秤 放 时 ， 如 果 返 回 false， 则 可 以 取消 默 表单 元 素 、<body> 
认 动 作 
网 本 文件 加 载 完成 时 <body>、<frameset>、<img>、 
<iframe>、<object> 
页 
设 onmousedown | 按 下 和 鼠标 堪 键 时 大 多 数 标记 
计 onmousemove | 饼 标 移动 时 大 多 数 标记 
onmouseout 和 所 标 离开 标记 时 大 多 数 标记 
和 鼠标 移动 到 标记 上 。 如 果 用 于 a 元 素 ， 返 回 a 
onmouseover true， 可 以 防止 URL 出 现在 状态 栏 中 大 多 数 标记 
onmouseup 释放 鼠标 左 键 时 大 多 数 标记 
onreset 表单 请 求 被 重 置 时 ， 如 果 返 回 false， 则 阻止 重 置 | <form> 
onresize 调整 窗口 大 小 时 <body>、<frameset> 
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( 续 表 ) 


请 求 提交 表单 时 ， 如 果 返 回 filse， 则 阻止 提交 。 | <form> 


大 体 上 ， 可 以 将 表 14-1 列 出 的 事件 属性 分 为 输入 事件 和 语义 事件 两 种 类 型 。 


地 输入 事件 
输入 事件 有 时 被 称 为 原始 事件 ， 这 些 事件 是 在 用 户 移动 鼠标 、 单 击 鼠 标 或 者 按键 盘 键 时 
触发 的 。 这 些 输入 事件 只 描述 用 户 的 动作 ， 没 有 其 他 含义 。 
医 语义 事件 
语义 事件 的 含义 比较 复杂 ， 通 常 只 有 在 特定 的 环境 中 才 会 被 触发 。 例 如 ， 当 用 户 单 击 按 
钮 时 会 触发 3 个 事件 ， 依 次 是 onmousedown、onmouseup 和 onclick。 


川 ) 14.2.2 事件 处 理 
在 原始 事件 模型 中 ， 处 理事 件 时 有 两 种 方式 ; 第 一 种 方式 是 将 JavaScript 代码 作为 
HTML 属性 值 ， 第 二 种 方式 是 将 事件 处 理 程序 作为 JavaScript 属性 。 
车 将 Javascript 代码 作为 HTML 属性 值 
简单 来 说 ， 事 件 处 理 程序 作为 HTML 的 属性 值 被 设置 为 JavaScript 脚本 。 以 下 内 容 为 
<input> 标记 指定 onClick 事件 属性 ， 单 击 按钮 时 弹出 一 个 “谢谢 ”提示 对 话 框 。 代 码 如 下 : 


<input type="button" id="btnMessage" value=" 确定 " onClick="alert(' 谢谢 )" /> 


如 果 处 理 程 序 由 多 个 JavaScript 语句 组 成 ， 事件 处 理 程 序 的 属性 值 可 以 是 任意 的 
JavaScript 脚本 ， 那 么 必须 在 各 个 语句 之 间 使 用 分 号 分 隔 

【 例 14-4] 

下 面 为 type 属性 值 为 button 的 <input> 标记 添加 onClick 
JavaScript 语句 。 代 码 如 下 : 


<input type="button" id="btnSubmit" value=" 提交 "onclick="document.write(' 投票 成 功 ');alert(' 谢谢 )" /> 


1 二 


HTML 中 的 标记 不 区 分 大 小 写 ， 因 此 可 以 选择 多 种 方式 来 命名 事件 处 理 属性 。 例 如 ，onclick、 | 

onClick、OnClick 都 是 触发 的 Click 事件 。 通 常 采 用 大 小 写 混合 的 形式 ， 即 前 缓 小 写 为 oa， 如 | 

| onClick、onLoad 和 onMouseOver 等 。 | 
国 了 将 事件 处 理 程序 作为 JavaScript 属性 

每 一 个 HTML 标记 在 文档 树 (DOM) 中 都 有 一 个 相应 的 JavaScript 对 象 ， 这 个 JavaScript 


i 
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件 属 性 ， 该 属性 包含 两 个 
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: 上 述 代 码 中 ，document.fl 根据 name 
属性 值 获 取 页 面 中 的 指定 表单 ，document. 


对 象 的 属性 对 应 于 HTML 标记 的 属性 。 因此 ， | 
如 果 一 个 <inpuf> 标记 具有 onClick 属性 , 那 
么 该 表单 元 素 对 象 的 onClick 属性 就 可 以 引用 ， 


所 .bl 用 于 获取 表单 中 


的 指定 <inpuf 标记 ， 


它 包 含 的 事件 处 理 程序 。 : document fl bl.onclick 表示 为 指定 的 <input> 
【 例 14-5】 ; 标记 添加 onclick 事件 属性 。 以 上 代码 等 价 于 


下 面 通过 一 个 例子 演示 将 事件 处 理 程 ， 下面 的 代码 : 


序 作为 JavaScript 属性 时 的 方法 。 首 先 在 页 ， 


document.f1.b1.onclick=GetiInfo; 


面 中 添加 一 个 表单 元 素 ， 向 表单 中 插入 一 个 : 
- 二 : function Getinfo(){ 
<input> 标记 。 代 码 如 下 : ee 
<form name="f1"> | } 


<input name="b1" type="button" 
value="Click Me"/> 
</form> 


| 把 事件 处 理 程序 作为 JavaScript 脚本 有 两 
| 个 好 处 : 第 一 ， 减 少 了 HIML 和 JavaScript 
; 脚本 的 混合 ， 增 强 了 代码 的 模块 性 ， 使 代码 
; 更 加 简洁 ， 也 更 加 容易 维护 。 第 二 ， 使 事件 
; 处 理 函数 进行 动态 处 理 。 与 HIML 属性 不 同 
; 的 是 ， 它 是 文件 的 一 个 静态 部 分 。HTML 属 
document.f1.b1.onclick=function(){ i! 性 只 有 在 创建 文件 时 才能 对 它 进 行 处 理 ， 而 
alert("thanks"); ”JavaScript 的 属性 可 以 在 任何 时 候 改变 。 在 复 
让 i 杂 的 交互 过 程 中 ， 动 态 地 改变 注册 到 HIML 
</script> | 标记 的 事件 处 理 程序 有 时 也 非常 有 用 。 


咱 ) 14.2.3 ”使 用 事件 返回 值 


事件 的 返回 值 通常 由 事件 处 理 程序 提供 , 但 是 JavaScript 并 不 要 求 所 有 的 事件 都 有 返回 值 。 
如 果 事 件 处 理 程序 没有 返回 值 ， 浏 览 器 会 以 默认 的 情况 进行 处 理 。 不 过 ，Web 开发 者 可 以 通 
过 事件 的 返回 值 来 判断 事件 处 理 程序 是 否 正确 处 理 了 程序 。 在 这 种 情况 下 ， 事 件 的 返回 值 通 
常 是 布尔 值 。 如 果 事 件 的 返回 值 为 tue， 则 浏览 器 会 采用 默认 的 操作 ; 如 果 事 件 的 返回 值 为 
false， 则 浏览 器 会 阻止 默认 的 操作 。 
【 例 14-6]】 
以 提交 表单 为 例 ， 当 用 户 单 击 提交 表单 时 ， 浏 览 器 会 将 表单 内 容 提交 到 <form> 标记 的 
action 属性 所 指定 的 URL 上 ， 这 是 浏览 器 默认 的 操作 。 在 用 户 单 击 “ 提 交 ” 按 钮 时 ， 将 会 触 
发 按钮 事件 。 如 果 按 钮 事件 返回 false， 则 浏览 器 会 阻止 默认 的 操作 ， 即 不 提交 表单 数据 。 实 
现 步 骤 如 下 。 
加 中 在 页 面 中 添加 一 个 表单 元 素 ， 在 表单 中 创建 一 个 输入 框 、 两 个 密码 框 和 一 个 提交 
按钮 。 
加 允 单 击 “ 提 交 ” 按 钮 时 会 触发 按钮 的 submit 事件 ，submit 
数 处 理 提 交 事 件 。 页 面 主要 代码 如 下 : 


在 <script></script> 标记 中 添加 下 面 代码 


<script> 
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事件 会 调用 checkData() 函 


<form name="myForm" action="submit.html" onsubmit="return checkData()" > 


<h1> 快速 注册 </h1> 


<p> 
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<label data-icon="u"> 姓名 </label> 
<input name="myName" type="text" placeholder=" 姓名 " /> 
</p> 
<p> 
<label class="youpasswd" data-icon="p"> 登录 密码 </label> 
<input name="myPassword1" type="password" placeholder=" 密码 "/> 
</p> 
<p> 
<label class="youpasswd" data-icon="p"> 重复 密码 </label> 
<input name="myPassword2" type="password" placeholder=" 密码 "/> 
</p> 
<p class="signin button"> 
<input type="submit" value=" 提交 "/> 
</p> 
</form> 


在 上 述 代码 中 ， 将 onsubmit 属性 的 值 设置 为 retum checkData()， 说 明 要 从 checkDatal() 函 
数 中 获取 返回 值 。 如 果 该 函数 的 返回 值 为 false， 则 阻止 提交 操作 ;否则 将 数据 提交 到 submit. 
html 网 页 。 
加 B 创建 checkData() 函数 ， 在 该 函数 中 获取 表单 中 的 用 户 名 、 密 码 和 确认 密码 框 的 内 容 。 
如 果 它 们 的 值 为 空 ， 则 弹出 提示 信息 ， 并 且 返 回 false; 如 果 输 入 框 和 密码 框 中 都 输入 了 内 容 ， 
则 返回 tue。 代 码 如 下 : 


function checkDatal() 
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{ 
if (myForm.myName.value=="") 
{ 
alert(" 请 输入 姓名 "); 
} 
else if (myForm.myPassword1.value=="") 
{ 
alert(" 请 输入 密码 "); 
} 
else if (myForm.myPassword2.value=="") 
{ 
alert(" 请 重复 密码 "); 
} 
else if (myForm.myPassword1.value!l=myForm.myPassword2.value) 
{ 
alert(" 两 次 密码 输入 不 一 致 ， 请 重新 输入 "); 
} 
else 
{ 
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return true; 
} 
return false; 


} 


四 双 在 浏览 器 中 运行 上 述 页 面 ， 在 页 面 ， 
的 输入 框 中 输入 部 分 内 容 , 然后 单 击 
按钮 进行 测试 ， 如 图 14-1 所 示 。 


“提交 ” | 


9) 14.3 ”标准 事件 模型 


| ley SE 
| Owen \ 
i |¢ > ee Q © me/Emunispace/cocelaNndex3 himl w] :| 
快速 注册 
1 
终 名 
1 此 网 页 昌 示 : 
清史 入 姑 全 
EE 问 由 册页 再 时 示 2 中 泊 杠 ， | 
2 
本 
至 Ex 到 
2 


一 


图 14-1 使 用 事件 的 返回 值 


前 面 介 绍 的 事件 处 理 方法 都 是 0 级 DOM 的 一 部 分 ， 即 所 有 局 用 JavaScript 的 浏览 器 都 支 
持 标准 API。DOM 标准 定义 了 高 级 事件 处 理 的 API， 它 与 0 级 有 很 大 的 不 同 ， 而 且 功能 更 加 
强大 。 下 面 详细 介绍 与 DOM 标准 事件 模型 有 关 的 知识 。 


只》14.3.1 事件 传播 


在 原始 事件 模型 中 ， 浏 览 器 把 事件 指派 ; 
给 发 生 事件 的 文件 标记 。 如 果 某 个 对 象 具有 : 
适合 的 事件 处 理 程 序 ， 就 运行 这 个 程序 。 除 | 
此 之 外 ， 不 用 执行 其 他 的 程序 。 但 是 在 2 级 ; 
; 段 ， 事 件 将 从 目标 节点 向 上 传播 或 起 泡 


DOM 事件 模型 中 ， 事 件 处 理 程序 比较 复杂 ， 


当 事 件 发 生 时 ， 目 标 节点 的 事件 处 理 程序 就 
会 被 触发 执行 ， 但 是 目标 节点 的 父 节点 也 有 ， 
”有 类型 的 事件 都 起 泡 。 例 如 ， 把 提交 事件 从 
”<fomm> 标记 向 上 传播 到 控制 它 的 文件 标记 没 
， 有 任何 意义 。 


机 会 来 处 理 这 个 事件 。 

一 般 情 况 下 ， 事 件 的 传播 分 为 三 个 阶段 : 
捕捉 阶段 、 事 件 阶 段 和 起 泡 阶 段 。 

(1) 捕捉 阶段 。 


在 捕捉 阶段 ， 事 件 从 Document 对 象 沿 : 
着 DOM 树 向 下 传播 到 目标 节点 ， 如 果 目 标 ; 
的 任何 一 个 父 节点 注册 了 捕捉 事件 的 处 理 程 | 
序 ， 那 么 事件 在 传播 的 过 程 中 就 会 首先 运行 ; 


这 个 程序 。 
(2) 事件 阶段 。 
事件 阶段 是 事件 传播 的 第 二 个 阶段 ， 它 


发 生 在 目标 节点 本 身 ， 直 接 注册 在 目标 上 的 | 


适合 事件 处 理 程序 将 运行 ， 这 与 0 级 事件 模 
型 提供 的 事件 处 理 方法 类 似 。 

(3) 起 泡 阶 段 。 

起 泡 阶段 是 最 后 一 个 阶段 ， 在 这 个 


阶 
回 
Document 对 象 的 文件 层次 。 虽 然 所 有 事件 
都 受 事 件 传播 捕捉 阶段 的 支配 ， 但 是 并 非 所 


- 企 帮 
| 在 正 浏 览 器 中 ， 没 有 捕捉 阶段 ， 但 是 有 
| 起 泡 阶 段 。 j 


在 事件 传播 过 程 中 ， 任 何事 件 处 理 程 


序 都 可 以 调用 表示 那个 事件 的 Event 对 象 的 
: stopPropagating() 方法 来 停止 事件 传播 。 有 些 


事件 还 会 触发 浏览 器 执行 相关 的 默认 动作 。 
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例如 ， 在 单 击 <a> 标记 时 ， 浏 览 器 的 默认 动作 是 进行 超 链 接 ， 这 样 的 默认 动作 只 在 事件 传播 
的 三 个 阶段 完成 之 后 才 会 执行 ， 事 件 传播 过 程 中 调用 的 任何 处 理 程 序 都 能 通过 调用 Event 对 
象 的 preventDefault() 方法 阻止 默认 动作 的 发 生 。 在 下 6 浏览 器 中 ， 就 是 把 cancelBubble 的 值 
设置 为 true。 


叫 ) 14.3.2 ”注册 事件 处 理 程序 


在 原始 事件 模型 的 0 级 API 中 ， 通 过 在 HIML 中 设置 属性 或 者 在 JavaScript 脚 
本 中 设置 对 象 的 属性 来 注册 事件 处 理 程 序 。 但 是 在 标准 事件 模型 中 ， 可 以 调用 对 象 的 
addEventListener() 方法 为 特定 标记 注册 事件 处 理 程序 。 基 本 语法 如 下 : 


EventTarget.addEventListener(String type,EcentListener listener,blooean useCapture) 


从 上 述 语法 可 以 看 出 ，addEventListener() 方法 需要 传 入 3 个 参数 ， 参 数 说 明 如 下 。 

@ type ”要 注册 处 理 程序 的 事件 类 型 名 称 ， 这 个 名 称 应 该 是 包含 小 写 HTML 属性 的 字符 串 ， 
而 且 没 有 前 缀 “on” ， 如 click、mouseover 和 keydown 等 。 

e@ listener 处 理 函 数 ， 在 指定 类 型 的 事件 发 生 时 调用 该 函数 。 在 调用 这 个 函数 时 ， 传 递 给 
它 的 唯一 参数 是 Event 对 象 ， 这 个 对 象 存放 了 有 关 事件 ( 例如 鼠标 被 按 下 或 者 移动 ) 的 详 
情 ， 并 定义 了 stopPropagation0 方法 。 

@ UseCapture 该 参数 的 值 是 一 个 布尔 值 ， 它 决定 注册 程序 在 传播 的 哪 一 个 过 程 被 调用 。 
如 果 该 参数 值 为 tue， 则 指定 的 事件 处 理 程 序 将 在 事件 传播 的 捕捉 阶段 用 于 捕捉 事件 ;如 
果 该 参数 的 值 为 false， 则 事件 处 理 程 序 就 是 默认 的 ， 当 事件 直接 发 生 在 对 象 上 或 发 生 在 
标记 的 父 节点 上 ， 又 向 上 起 泡 到 该 标记 时 ， 该 处 理 程序 将 被 触发 。 

【 例 14-7] 

以 下 代码 简单 调用 了 addEventListener() 方法 。 


document.addEventListener("mousemove",moveHandler,true); 


上 述 代 码 表 示 在 mousemove 事件 发 生 的 时 候 调用 moveHandler 函数 ， 并 且 可 以 捕捉 这 个 
事件 。 

可 以 用 addEventListener 为 一 个 事件 注册 多 个 事件 处 理 程序 ， 那 么 当 该 类 型 的 事件 在 这 
个 对 象 上 发 生 时 ， 所 有 被 注册 的 函数 都 将 被 调用 ， 但 是 这 些 函数 的 执行 顺序 是 不 确定 的 。 


(只 - 提示 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 


在 Firefox 中 用 addEventListener 注册 一 个 事件 处 理 程序 时 ，this 关键 字 表 示 调 用 事件 处 理 1 

et 但 是 其 他 浏览 器 并 不 一 定 是 这 样 ， 因 为 这 不 是 DOM 标准 ， 正 确 的 做 法 是 用 | 

| currentTarget 属性 来 引用 调用 事件 处 理 程序 的 文档 元 素 。 | 

与 addEventListener() 方法 对 应 的 是 removeEventListener(0) 方法 ， 这 两 个 方法 都 是 上 

EventTarget 接口 定义 的 。 在 支持 标准 DOM 事件 模型 的 浏览 器 中 ， 所 有 Document 节点 都 实 
现 了 这 个 接口 。 

使 用 removeEventListener(0 方法 时 需要 传 入 3 个 参数 ， 这 3 个 参数 的 含义 与 
addEventListener() 方法 的 相同 ， 不 过 removeEventListener() 方法 的 作用 是 从 对 象 中 删除 事件 
处 理 函 数 ， 而 不 是 添加 。 通 常 在 实际 应 用 时 ， 临 时 注册 一 个 事件 处 理 函 数 ， 用 过 之 后 再 快速 
删除 它 。 
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以 下 代码 演示 了 removeEventListener() 方法 的 使 用 。 


document.removeEventListener("mouseup", handle MouseUp, true); 


【 例 14-8] 
创建 一 个 完整 的 示例 演示 addEventListener( 方法 的 使 用 。 完 整 代码 如 下 
<html> 

<head> 


<meta content="text/html; charset=Big5" http-equiv="content-type"> 
<script type="text/javascript"> 
window.addEventListener('load', function() { 
function handler() { 
document.getElementByld('console').innerHTML = 'WhoN's clicked: ' + this.id; 


b 
document.getElementByld('btn1').addEventListener('click', handler, false); 
document.getElementByld('btn2").addEventListener('click', handler, false); 
}, false); 
</script> 
</head> 
<body> 


<button id="btn1"> 按 一 </button><br> 
<button id="btn2"> 按 二 </button><br> 
<div id="console"></div> 
</body> 
</html> 
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在 上 述 代码 的 事件 处 理 器 中 使 用 的 this 关键 字 ， 表 示 获 取 目 前 触发 事件 的 元 素 。 


97) 14.4 常用 事件 


JavaScript 的 事件 很 多 ， 为 了 给 大 家 减轻 学 习 负 担 ， 本 节 只 讲 常用 的 事件 ， 如 键盘 事件 、 
鼠标 事件 和 页 面 事件 。 这 些 事件 是 我 们 今后 开发 中 常用 的 事件 ， 也 是 必须 掌握 的 。 


川 ) 14.4.1 键盘 事件 
键盘 事件 ， 顾 名 思 义 就 是 按键 触发 的 事件 ， 即 当 我 们 操作 键盘 时 会 触发 执行 。 它 大 体 上 
分 为 以 下 三 种 。 
@ onkeypress 这 个 事件 在 用 户 按 下 并 放 开 任何 字母 、 数 字 键 时 发 生 。 但 是 ,系统 按钮 (如 
箭头 键 和 功能 键 ) 无 法 得 到 识别 。 
@ onkeyup 这 个 事件 在 用 户 放 开 任何 先前 按 下 的 键盘 键 时 发 生 。 
e@ onkeydown 这 个 事件 在 用 户 按 下 任何 键盘 键 ( 包括 系统 按钮 ， 如 箭头 键 和 功能 键 ) 时 
发 生 。 
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代码 如 下 : 


【 例 14-9] | function document.onkeypress() 
下 面 我 们 来 看 看 键盘 事件 的 具体 应 用 ， { 
: if ( event.keyCode=="43') 
[f 


<script type="text/javascript"> 
function document.onkeydown() 


alert(' 你 输入 了 键盘 的 "+" 键 ); 


} 
{ 
if( event.keyCode=='39' ) //-> 右 箭 头 ee 
{ 
window.open("http://www.baidu. | 上 述 代码 在 document 对象 上 添加 了 
com"); | onkeydown 和 onkeypress 两 个 事件 。 按 下 右 
: } | 键 可 以 打开 一 个 页 面 ， 按 下 “+” 键 弹出 一 个 


i 对 话 框 显示 “你 输入 了 键盘 的 “+” 键 ”。 


")11442 鼠标 事件 


鼠标 导 
离开 事件 、 


有 件 很 多 ， 如 鼠标 单 击 事件 、 和 鼠标 双击 事件 、 鼠 标 移动 事件 、 鼠 标 拖 动 事件 、 鼠 标 
鼠标 滚动 事件 等 ， 如 表 14-2 所 示 。 
表 14-2 鼠标 常见 事件 列表 


事件 名 称 说 明 
onblurO 在 表单 元 素 中 使 用 ， 当 元 素 失 去 焦点 的 时 候 执行 
onchange() 在 表单 元 素 中 使 用 ， 当 某 些 东西 改变 时 执行 
onclick() 息 标 单 击 一 个 元 素 时 执行 
ondblclickO 和 鼠标 双击 一 个 元 素 时 执行 
onfocusO 在 表单 元 素 中 使 用 ， 当 元 素 获得 焦点 时 执行 
onkeydown() 按 下 某 个 按键 时 执行 
onkeypress() 按 下 并 释放 某 个 按键 时 执行 
onkeyup() 释放 某 个 按键 时 执行 
onload() 在 body 标签 中 使 用 ， 载 入 页 面 的 时 候 执行 
onmousedown() 按 下 鼠标 按键 时 执行 
onmousemove() 息 标 光标 在 元 素 上 移动 时 执行 
onmouseout() 和 饼 标 光标 移 开 元 素 时 执行 
onmouseover() 鼠标 光标 移 到 元 素 上 时 执行 
onmouseup() 释放 和 鼠标 按键 时 执行 
onresetO 在 表单 元 素 中 使 用 ， 当 表单 重 置 时 执行 
onselectO) 在 表单 元 素 中 使 用 ， 当 元 素 被 选择 时 执行 
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( 续 表 ) 
事件 名 称 说 明 
onsubmitO 在 表单 元 素 中 使 用 ， 当 表单 提交 时 执行 
onunload() 在 body 标签 中 使 用 ， 当 关闭 页 面 时 执行 
【 例 14-10] 


下 面 是 一 个 简单 而 常用 的 鼠标 单 击 事件 示例 。 


<html> 
<head> 
<script type="text/javascript"> 
function whichButton(event) 
{ 
if (event.button==2) 
{ 
alert(" 你 单 击 了 鼠标 右键 !") 
1 
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else{ 
alert(" 你 单 击 了 鼠标 左 键 !") 
} 
} 
</script> 
</head> 
<body onmousedown="whichButton(event)"> // 在 body 上 添加 了 onmousedown 事件 
请 单 击 鼠 标的 左 键 或 右键 
</body> 
</html> 


上 述 代 码 在 body 元 素 上 添加 了 onmousedown 事件 ， 当 单 击 鼠 标 键 时 触发 该 事件 执行 
whichButton(event) 方法 。 


川 ) 14.4.3 页面 事件 
JavaScript 还 有 另 一 种 常用 的 事件 一 一 页 面 事件 , 它 是 页 面 加载 或 改变 浏览 器 大 小 、 位置， 


以 及 对 页 面 中 的 滚动 条 进行 操作 时 所 触发 的 事件 处 理 程序 。 我 们 先 来 看 看 页 面相 关 事件 都 有 
哪些 ， 如 表 14-3 所 示 。 


表 14-3 页面 事件 列表 


当前 页 面 的 内 容 将 要 被 改变 时 触发 的 事件 
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考试 ”的 提示 。onunload 事 件 也 可 以 实现 这 个 功能 , 不 过 它 与 onbeforeunload 事 件 有 一 定 的 
区 别 将 在 实例 代码 之 后 进行 讲解 ， 实 例 代码 如 下 : 


具体 


<body onbeforeunload=" checkLeave()"> 
<script> 
function checkLeave(){ 


( 续 表 ) 

ct 捕 提 当 前 页 面 因为 某 个 问题 而 出 现 的 错误 ， 如 脚本 

错误 ， 外 部 数据 引用 错误 

页 面 内 容 完成 传送 到 浏览 器 时 触发 的 事件 ， 包 括 外 
onLoadO 6 i 

部 文件 引入 完成 
onMoveO 当 浏 览 器 的 窗口 被 移动 时 触发 的 事件 
onResize() 当 浏 览 器 的 窗口 大 小 被 改变 时 触发 的 事件 
onScroll0 浏览 器 的 滚动 条 位 置 发 生变 化 时 触发 的 事件 

浏览 器 的 停止 按钮 被 按 下 或 者 正在 下 载 的 文件 被 中 
onSstopO 

断 时 触发 的 事件 
onUnloadO) 3IN2|I03 当前 页 面 将 被 改变 时 触发 的 事件 

学 习 了 页 面 事 件 之 后 ， 我 们 使 用 页 面 事件 中 的 onbeforeunload 事件 来 实现 一 个 考试 系统 

防止 用 户 中途 退 出 考试 《有意 或 者 无 意 ) 的 功能 。 当 用 户 退 出 考试 时 ， 给 出 是 否 “确定 放弃 


区 别 。 


event.returnValue=" 确定 放弃 考试 ? (考试 作废 ， 不 记录 成 绩 )"; 


} 
</script> 
这 样 可 以 让 用 户 确认 是 否 要 退出 考试 ， 


如 果 不 保存 而 跳 转 到 其 他 页 面 ， 也 会 有 一 ， 
个 确认 的 提示 (防止 误 操作 )， 也 是 使 用 


onbeforeunload 。 


另外 还 可 以 在 页 面 关闭 的 时 候 用 于 | 


用 window. ; 


关闭 Session， 代 码 如 下 ( 注 : 
screenLeft > 10000 来 区 分 关闭 和 刷新 操作 ): 


<body onbeforeunload="closeSession()"> 
<script> 
function closeSession (){ 
// 关闭 《刷新 的 时 候 不 关闭 Session) 
if(window.screenLeft>10000){ 
// 关闭 Session 的 操作 (可 以 运用 Ajax) 
} 


} 


</script> 


onbeforeunload 是 在 页 面 刷新 或 关闭 时 调 
用 ， 即 正 要 去 服务 器 读 取 新 的 页 面 时 调用 ， 
此 时 还 没 开始 读 取 ; 而 onunload 则 是 已 经 
| 服务 器 上 读 到 了 需要 加 载 的 新 页 面 ， 在 即将 
”替换 掉 当前 页 面 时 调用 。onunload 是 无 法 阻 
; 止 页 面 的 更 新 和 关闭 的 ， 而 onbeforeunload 
;可 以 阻止 。 
， ”onunload 也 是 在 页 面 刷新 或 关闭 时 调用 ， 
: 可 以 在 script 脚本 中 通过 window.onunload 
| 来 指定 或 者 在 body 里 指定 。 区 别 在 于 ， 
; onbeforeunload 在 onunload 之 前 执行 ， 它 还 
i 可 以 阻止 onunload 执行 。 
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7 14.5 DOM 简介 


DOM 即 Document Object Model (文档 对 象 模 型 ) 的 简称 。 根 据 W3C DOM 规范 ，DOM 
是 一 个 独立 于 语言 、 浏 览 器 以 及 平台 的 应 用 程序 编程 接口 。 通 过 该 接口 ， 应 用 程序 可 以 访问 
并 更 改 文档 的 内 容 、 结 构 和 样式 。 

DOM 按照 标准 不 同 被 分 为 不 同 的 部 分 : DOM Core、XML DOM 和 HIML DOM 等 。 其 
中 ，Core DOM 定义 了 一 套 标准 的 针对 任何 结构 化 文档 的 对 象 ，XML DOM 定义 了 一 套 标准 
的 针对 XML 文档 的 对 象 ，HIML DOM 定义 了 一 套 标准 的 针对 HTML 文档 的 对 象 。 下 面 以 
HTML DOM 为 例 介 绍 DOM 的 节点 关系 和 核心 接口 。 


咱 ) 14.5.1 HTML DOM 中 的 节点 树 
在 DOM 中 ，HTML 文 


工 

和 梢 的 层次 结构 都 被 映射 为 Document 

网 一 个 树 形 结构 ， 文 档 的 每 

+ 一 个 成 分 都 是 这 棵 树 中 内 Element 

8】 节点 (node) 。 整 个 文档 是 

六 一 个 文档 节点 (Document )， TI edent 
每 个 HTML 标签 是 一 个 元 > <body> 

十 素 节点 (Element) ， 每 个 

标签 中 的 属性 是 一 个 属性 | 人 ene et er 要 
节点 “Attr) ， 文 本 是 一 个 ~ 
9 文本 节点 (Text)， 注 释 属 Text Text Attr Text Text 
4 于 注释 节点 (Comment) 。 wh my heder 二 Le LA 
本 图 14-2 是 一 个 标准 的 图 14-2 HTML 文档 树 

肥 枯 HTML 文档 树 。 


这 棵 树 就 像 家 谱 一 样 ， 有 父 节点 、 兄 弟 节 点 和 子 节点 ， 节 点 与 节点 之 间 都 是 有 关系 的 。 
在 图 14-2 所 示 的 树 中 ， 除 了 文档 节点 外 ， 其 他 每 个 节点 都 有 一 个 父 节点 ， 例 如 <head> 和 
<body> 的 父 节 点 是 <html>。 除 了 文本 节点 和 属性 节点 外 ， 其 他 大 部 分 节点 都 有 子 节点 ， 例 
如 <p> 节点 有 一 个 文本 节点 “my content”。 当 一 个 节点 和 其 他 节点 有 一 个 共同 的 父 节点 时 ， 
我 们 就 称 这 个 节点 为 其 他 节点 的 兄弟 节点 ， 例 如 <head> 就 是 <body> 的 兄弟 节点 。 当 然 ， 节 
点 也 可 以 拥有 后 代 和 先辈。 对 一 个 节点 来 说 ， 它 的 所 有 子 节点 ， 以 及 子 节 点 的 子 节点 都 是 它 
的 后 代 ， 它 的 父 节 点 ， 以 及 父 节 点 的 父 节 点 都 是 它 的 先辈 。 例 如 <title>、<head>、<a>， 以 及 
所 有 的 文本 节点 都 是 <html> 节点 的 后 代 ; 同时 ，<html> 节点 反 过 来 就 是 它们 的 先辈 。 

任何 一 个 格式 良好 的 HIML 文件 中 , 每 一 个 元 素 均 有 DOM 文档 中 的 一 个 节点 类 型 与 之 
对 应 。 因 此 利用 DOM 接口 将 HIML 文件 转化 成 DOM 文档 后 ， 就 可 以 通过 程序 自由 地 处 理 
HIML 文件 的 内 容 和 样式 了 。 


咱 ) 14.5.2 DOM 核心 接口 


DOM 利用 对 象 把 文档 模型 化 ， 这 些 模型 不 仅 描 述 了 文档 的 结构 ， 还 定义 了 模型 中 对 象 
的 行为 。 也 就 是 说 ， 在 DOM 中 节点 不 仅仅 是 数据 结构 中 的 节点 ， 而 是 对 象 ， 对 象 中 包含 属 
性 和 方法 。 在 DOM 中 ， 对 象 模型 要 实现 表示 和 操作 文档 的 接口 、 接 口 的 行为 和 属性 、 接 
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之 间 的 关系 以 及 互 操作 。 
在 DOM 接口 规范 中 ， 有 4 个 核心 接口 : Document、Node、NodeList 以 及 NamedNodeMap。 
下 面 分 别 对 这 4 个 接口 做 简单 的 介绍 。 
伍 Document 接 品 
Document 接口 代表 了 整个 文档 ， 它 是 整 棵 文档 树 的 根 ， 提 供 了 对 文档 树 中 的 节点 进行 访 
问 和 操作 的 入 口 。 

由 于 元 素 、 文 本 、 注 释 、 处 理 指 令 等 节点 都 不 能 脱离 文档 树 的 上 下 文 关系 而 独立 存在 ， 
所 以 在 Document 接口 中 提供 了 创建 这 些 节 点 对 象 的 方法 。 通 过 该 方法 创建 的 节点 对 象 都 有 
一 个 ownerDocument 属性 ， 用 来 表明 当前 节点 是 由 谁 创 建 的 ， 以 及 节点 同 Document 之 间 的 
联系 。 

表 14-4 和 表 14-5 分 别 列 出 了 Document 对 象 常用 的 属性 和 方法 。 

表 14-4 Document 对 象 常用 属性 


属性 名 称 说 明 


返回 存在 于 XML 文档 以 及 HTML 文档 中 的 根 元 素 节点 ， 在 HTML 文档 
中 它 便 是 html 节点 


Body 该 属性 是 对 HTML 文档 的 特殊 扩展 ， 它 返回 的 是 body 节点 


表 14-5 ”Document 对 象 常用 方法 


方法 名 称 说 明 


documentElement 
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createComment() 用 指定 的 字符 串 创 建新 的 Comment 节点 
createElement() 用 指定 的 标记 名 创建 新 的 Element 节点 
createTextNode() 用 指定 的 文本 创建 新 的 Text 节点 
createAttribute() 用 指定 的 名 字 创 建新 的 Attr 节点 
getElementById() 返回 文档 中 具有 指定 id 属性 的 Element 节点 


getElementsByTagName() | 返回 文档 中 具有 指定 标记 名 的 所 有 Element 节点 


区 Node 接口 
Node 接口 在 整个 DOM 树 中 具有 举足轻重 的 地 位 ，DOM 接口 中 有 很 大 一 部 分 是 从 Node 
接口 继承 过 来 的 ， 例 如 ，Element、Attr、CDATIASection 等 接口 都 是 从 Node 继承 过 来 的 。 在 
DOM 树 中 ，Node 接口 代表 了 树 中 的 每 一 个 节点 ， 提 供 了 访问 DOM 树 中 各 个 节点 的 属性 和 
方法 ， 并 给 出 了 对 DOM 树 中 的 元 素 进行 遍历 的 支持 。 
表 14-6 和 表 14-7 分 别 列 出 了 Node 对 象 常用 的 属性 和 方法 。 
表 14-6 Node 对 象 常用 属性 


| 属性 名 称 说 明 


返回 节点 的 名 字 。Element 节点 返回 标记 名 称 ，Text 节点 返回 #text， 
Document 节点 返回 #Document 


nodeName 
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方法 名 称 说 明 


( 续 表 ) 
属性 名 称 说 明 
nodeValue 返回 节点 的 值 
返回 节点 的 类 型 。FElement、Attr、Text、Comment、Document、 
nodeType 2 
DocumentFragment 节点 的 nodeType 值 分 别 为 1|、2、3、8、9、11 
firstChild 返回 当前 节点 的 第 一 个 子 节 点 。 如 果 没 有 子 节点 ， 则 为 null 
lastChild 返回 当前 节点 的 最 后 一 个 子 节 点 。 如 果 没 有 子 节点 ， 则 为 null 
childNodes 以 数组 形式 存放 当前 节点 的 子 节 点 。 如 果 没有 子 节点 ， 则 返回 空 数组 
nextSibling 返回 当前 节点 的 下 一 个 兄弟 节点 。 如 果 没 有 这 样 的 节点 ， 则 返回 null 
parentNode 返回 当前 节点 的 父 节 点 。 如 果 没 有 父 节 点 ， 则 为 null 
ER Sit 返回 紧 挨 当 前 节点 、 位 于 它 之 前 的 兄弟 节点 。 如 果 没 有 这 样 的 节点 ， 则 
previousSibling 
返回 null 
如 果 该 节点 是 一 个 Element， 则 以 NamedNodeMap 形式 返回 该 元 素 的 
Attributes 


属性 


表 14-7 Node 对 象 常用 方法 


appendChild() 把 一 个 节点 增加 到 当前 节点 的 childNodes[] 组 ， 给 文档 树 增加 节点 
cloneNodeO 复制 当前 节点 ， 或 者 复制 当前 节点 以 及 它 的 所 有 子孙 节点 
二 给 文档 树 插入 一 个 节点 ， 位 置 在 当前 节点 的 指定 子 节点 之 前 。 如 果 该 攻 
点 已 经 存在 ， 则 先 删除 再 插入 到 它 的 位 置 

removeChild() 从 文档 树 中 删除 并 返回 指定 的 子 节点 
TeplaceChildO 从 文档 树 中 删除 并 返回 指定 的 子 节点 ， 用 另 一 个 节点 替换 它 
hasChildNodes() 如 果 当 前 节点 拥有 子 节点 ， 则 返回 true 

后 NodeList 接口 


NodeList 接口 提供 了 对 节点 集合 的 抽象 定义 ， 它 并 不 包含 如 何 实现 这 个 节点 集 的 定义 。 


NodeList 用 于 表示 有 顺序 关系 的 一 组 节点 ， 比 如 某 个 节点 的 子 节点 序列 。 另 外 ， 它 还 出 现在 
一 些 方法 的 返回 值 中 ， 如 getElementsByTagName()。 

在 DOM 中 ，NodeList 的 对 象 是 动态 的 。 换 句 话 说 ， 对 文档 的 改变 会 直接 反映 到 相关 的 
NodeList 对 象 中 。 例 如 ， 通 过 DOM 获得 某 个 元 素 节点 的 一 个 NodeList 对 象 ， 该 对 象 包 含 这 
个 元 素 节点 的 所 有 子 节点 ， 那 么 ， 当 再 通过 DOM 对 该 元 素 节点 进行 操作 添加、 删除 、 移 
动 节点 ) 时 ， 这 些 改变 将 会 自动 反映 到 NodeList 对 象 中 ， 而 不 需要 DOM 应 用 程序 做 其 他 额 


外 的 操作 。 


NodeList 中 的 每 个 item 都 可 以 通过 一 个 索引 来 访问 ， 该 索引 值 从 0 开始 。 


-3 .| 后 
NamedNodeMap 接口 


通过 NamedNodeMap 接口 可 以 建立 节点 名 和 节点 之 间 的 一 一 映射 关系 ， 从 而 可 以 利用 节 
点 名 直接 访问 特定 的 节点 。 这 个 接口 主要 用 在 属性 节点 的 表示 上 。 


7 14.6 ”实践 案例 : 使 用 DOM 操作 节点 


通过 上 一 节 的 学 习 ， 我 们 知道 DOM 把 一 个 HIML 文档 看 成 是 一 棵 树 。 对 一 个 树 形 结构 
来 说 ， 常 见 的 操作 无 非 就 是 遍历 、 查 找 、 添 加 、 删 除 节点 等 。 然 而 ，HIML 文档 树 不 是 一 棵 
普 普通 通 的 树 形 结构 树 ， 因 此 在 访问 和 操作 它 的 节点 时 ， 与 普通 树 的 操作 有 相同 的 地 方 ， 也 
有 不 同 的 地 方 。 下 面 通过 案例 依次 讲解 节点 的 具体 操作 。 


叫 )》 14.6.1 访问 节点 


要 想 遍 历 一 棵 树 ， 首 先 要 做 的 是 访问 树 中 的 节点 。 要 访问 树 中 的 节点 可 以 通过 Node 
接口 的 firstChild、lastChild、childNode、parentNode、previousSibling 和 nextSibling 属性 进 
行 访问 ， 还 可 以 通过 DOM 提供 的 getElementById() 和 getElementsByTagName() 方法 直接 
访问 。 

下 面 是 一 个 标准 的 HIML 文档 。 


<html> 

<head> 
<title>DOM</title> 

</head> 

<body> 
<h1l> 第 2 章 关于 DOM</hl> 
<p id="p1" name="firstP">DOM 简介 </p> 
<p> 如 何 使 用 <a href="#">DOM</a> </p> 
<input type="button" onClick="testBtn()" value=" 测试 "/> 
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</body> 
</html> 
要 访问 HTML 文档 中 的 节点 ， 最 好 的 出 发 点 就 是 该 文档 的 根 节点 document。 由 于 根 节 


点 没有 parentNode， 但 是 有 唯一 一 个 子 节点 <html> 因此 可 以 通过 访问 <html> 节点 的 父 节点 
来 访问 它 。 
下 面 的 例子 说 明 如 何 访问 HIML 文档 中 的 document 节点 。 


<script type="text/javascript"> 
Function testBtn(){ 

var documentNode = document.childNodes[0].parentNode; 

alert( "document 文档 节点 的 nodeName 属性 值 为 : "+ documentNode.nodeName +""); 
} 


</script> 
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将 上 面 的 代码 插入 网 页 中 , 在 浏览 器 中 打开 , 单 击 “ 测 试 ” 按 钮 , 页 面 会 弹出 一 句 “document 
文档 节点 的 nodeName 属性 值 为 : #document”。 

如 果 将 下 面 这 段 代码 插 入 页 面 中 ， 测 试 时 ， 页 面 会 弹出 一 句 “document 文 档 节 点 的 
nodeType 属性 值 为 : 9”。 这 说 明 两 种 方法 都 访问 了 document 节点 。 


function testBtn(){ 

var documentType = document.nodeType; 

alert( "document 文档 节点 的 nodeType 属性 值 为 : "+ documentType + ""); 
} 


接 下 来 访问 HTML 文档 中 第 一 个 段落 节点 中 的 文本 节点 。 先 来 分 析 一 下 ， 该 文本 节点 在 
HTML 文档 树 中 的 位 置 。 该 文本 节点 是 p 节点 的 子 节点 ， 而 了 节点 又 是 body 节点 的 第 二 个 
子 节 点 ，body 节点 又 是 html 节点 的 第 二 个 子 节点 ， 因 此 我 们 可 以 通过 html 节点 访问 该 文本 
节点 。 

下 面 的 例子 说 明 如 何 访问 HTML 文档 中 的 文本 节点 。 


function testBtn(){ 

var htmlNode = document.childNodes[0]; 

var bodyNode = htmlNode.childNodes[1]; 

var pNode = bodyNode.childNodes[1]; 

vartextNode = PNode.childNodes[0]; 

alert( " 第 一 个 段落 节点 的 文本 节点 值 为 : "+ textNode.nodeValue + ""); 
} 


将 上 面 这 段 代 码 插 入 网 页 中 , 测试 时 , 页 面 会 弹出 一 句 “第 一 个 段落 节点 的 文本 节点 值 为 : 
DOM 简介 ”。 
人 ee 
| 在 把 文档 解析 为 DOM 的 过 程 中 ， 不 同 的 浏览 器 解析 出 来 的 结果 可 能 是 不 同 的 。 有 的 浏览 器 会 | 
把 “空格 ”和 “ 回 车 ”看 成 一 个 节点 ， 比 如 说 火狐 ; 有 的 则 把 “空格 ”和 “ 回 车 ”省 略 摔 了 ， 比 如 | 
| 说 下 。 因此 以 上 代码 在 不 同 的 浏览 器 下 运行 的 结果 是 不 一 样 的 。 j 


一 一 
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在 JavaScript 中 可 以 将 对 象 引 用 链接 在 一 起 ， 因 此 上 段 代码 中 声明 变量 的 部 分 也 可 以 用 
以 下 代码 替换 。 

var textNode = document.childNodes[0].childNodes[1].childNodes[1].childNodes[0]; 

这 样 ， 代 码 就 简练 多 了 ， 然 而 读 起 来 似乎 有 些 难 懂 。 在 节点 的 属性 中 还 可 以 使 用 fistChild 
和 lastChild 来 访问 节点 。 在 HTML 文档 中 ，html 节点 是 document 节点 的 firstChild; body 节 
点 又 是 html 节点 的 lastChild。 因 此 上 面 的 代码 还 可 以 这 样 写 : 


var textNode = document.firstChild.lastChild.childNodes[1].firstChild; 


现在 代码 变 得 清晰 多 了 ， 但 是 还 不 够 简练 。 在 DOM 中 ， 文 档 还 有 两 个 特殊 的 属性 来 访 
问 节点 ， 它 们 是 document.documentElement 和 document.body。 其 中 ， 第 一 个 属性 可 返回 存在 
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于 XML 文档 以 及 HIML 文档 中 的 根 元 素 节点 ， 在 HIML 文档 中 ， 它 便 是 html 节点 ;第 二 
个 属性 是 对 HTML 文档 的 特殊 扩展 , 它 返回 的 是 body 节点 。 因 此 上 面 的 代码 还 可 以 这 样 简练 : 


Var textNode = document.body.childNodes[1].firstChild; 


不 过 ， 我 们 还 有 更 轻松 的 访问 方法 ， 并 且 还 能 解决 浏览 器 不 兼容 的 问题 ， 即 DOM 提供 
的 两 个 更 强大 的 方法 ;getElementById0 和 getElementsByTagName()。 通 过 这 两 个 方法 可 以 查 
找 HIML 文档 中 的 任何 一 个 HTML 元 素 。 因 此 上 面 的 代码 还 可 以 这 样 写 : 


var textNode = document.getElementByld("p1").firstChild; 
或 者 
var textNode = document.getElementsByTagName!("p")[0].firstChild; 


另外 再 做 一 点 小 小 的 扩充 ， 上 面 的 代码 还 可 以 这 样 写 


var textNode = document.getElementByld("p1"); 
alert( " 第 一 个 段落 节点 的 文本 节点 值 为 : "+ textNode.innerHTML + ""); 


上 面 代 码 中 用 到 了 节点 的 innerHTML 属性 ， 这 个 属性 是 正 小 组 开发 的 特色 属性 ， 并 且 
被 目前 的 所 有 主流 浏览 器 所 支持 。 它 可 以 获取 或 设置 HIML 文档 中 一 个 元 素 节点 下 的 所 有 子 
节点 。 也 就 是 说 ， 如 果 一 个 元 素 节点 中 只 包含 一 个 文本 节点 ， 那 么 就 可 以 通过 innerHTML 属 
性 来 获取 这 个 文本 节点 的 内 容 。 

上 面 的 例子 暂 告 一 段落 , 下 面 来 了 解 getElementById0 和 getElementsByTagName() 这 两 个 方法 。 
它们 的 语法 格式 如 下 。 

getElementById0 语法 : 
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document.getElementByld("ID"); 


getElementsByTagName() 语法 : 


document.getElementsByTagName(" 标签 名 称 "); 
或 者 页 
document.getElementByld('ID').getElementsByTagNamel(" 标签 名 称 "); 设 


在 运行 的 时 候 ， 这 两 种 方法 会 忽略 文档 的 结构 。 假 如 希望 查找 文档 中 所 有 的 <p> 元 素 ， 计 
getElementsByTagName(“p”) 会 把 它们 全 部 找到 并 返回 一 个 数组 ， 不 管 <p> 元 素 处 于 文档 中 
的 哪个 层次 。 同 时 ， 由 于 了 D 具有 唯一 性 ，getElementById(“id”) 方法 返回 的 是 一 个 元 素 而 
不 是 一 个 数组 ， 不 论 这 个 元 素 隐藏 在 文档 结构 中 的 什么 位 置 ， 只 要 你 指定 了 它 的 外。 
另外 ， 在 使 用 的 时 候 大 家 需要 注意 ，getElementById() 只 能 运行 在 document 对 象 下 ， 而 
getElementsByTagName() 可 以 运行 在 任何 元 素 下 。getElementById( 无 法 工作 在 XML 中 。 要 
想 在 XML 文档 中 使 用 它 ， 必 须 通过 拥有 类 型 ID 的 属性 来 进行 搜索 ， 而 此 类 型 必须 在 XML 
DTD 中 进行 声明 。 
最 后 还 要 提 一 下 ， 对 HTML 文档 来 说 ，DOM 还 定义 了 一 个 方法 getElementsByName() 
来 访问 节点 。 该 方法 和 getElementById0 方法 相似 ， 但 是 它们 还 是 有 些 不 同 。 首 先 ， 检 索 条 
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件 不 同 。 一 个 是 利用 元 素 的 JD 属性 , 另 一 个 是 利用 元 素 的 name 属性 。 其次, 返回 值 类 型 不 同 。 
由 于 在 HTML 文档 中 ， 元 素 的 name 属性 并 不 是 唯一 的 ， 所 以 getElementsByYName() 方法 返 
回 的 是 一 个 元 素数 组 而 不 是 一 个 元 素 。 例 如 ， 下 面 这 段 代 码 会 弹出 一 个 文档 中 name 属性 值 
为 myTextbox 的 所 有 元 素 的 个 数 。 


var x=document.getElementsByName("myTextbox"); 
alert(x.length); 


川 》 14.6.2 遍历 节点 


在 前 面 的 学 习 中 ， 我 们 知道 DOM 把 一 个 HIML 文档 看 成 一 棵 节点 树 ， 并 且 讨 论 了 访问 
这 棵 树 中 节点 的 多 种 方法 。 对 一 个 树 形 结构 来 说 ， 遍 历 树 中 的 节点 就 是 家 常 便 饭 。 下 面 通过 
两 个 实例 来 讲述 如 何 遍历 HIML 文档 中 的 节点 。 

下 面 这 个 例子 说 明 如 何 统计 HIML 文档 中 元 素 节点 的 个 数 。 在 这 个 例子 中 ， 首 先 自 
定义 一 个 函数 countTotalElement (node) 。 该 函数 通过 循环 遍历 一 个 给 定 节点 的 子 节点 即 
childNodes[] 数组 中 的 每 一 个 元 素 ， 然 后 再 递归 调用 自身 ， 结 果 访 问 到 的 就 是 给 定 节点 的 所 有 
子 节点 。 由 于 本 实例 要 求 统计 的 是 元 素 节点 的 个 数 ， 因 此 还 要 通过 nodeType 对 节点 的 类 型 加 
以 判断 。 本 实例 的 代码 如 下 : 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
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<title>DOM</title> 
<script language="javascript"> 
var elementName = ""; // 定义 全 局 变量 ， 保 存 元 村 标记 名 
function countTotalElement(node) { // 参数 node 是 一 个 节点 对 象 
var total = 0; // 定义 一 个 计数 器 
if(node.nodeType ==1){ // 检查 node 是 否 为 Element 对 象 
total++; // 如 果 是 ， 计 数 器 加 1 
elementName = elementName + node.nodeName + "\r\n // 保存 Element 标记 名 
} 
var childrens = node.childNodes; // 获取 node 的 全 部 子 节 点 
for(var i=0;i<childrens.length;i++) 
{ 
total += countTotalElement(childrens[i]); // 在 每 个 子 节点 上 进行 递归 操作 
| 
return total; 
function countBtn(){ 
alert(' 本 文档 中 元 票 节点 的 总 数 为 :'+ countTotalElement(document) + \r\n 它们 分 别 是 : \r\n'+ 
elementName); 
elementName=" '; // 清空 全 局 变量 
} 
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</script> 
</head> 
<body> 
<h1> 第 2 章 关于 DOM</h1> 
<p id="p1">DOM 简介 </p> 
<p> 如 何 使 用 <a href="#" name="link">DOM</a></p> 
<input type="button" onClick="countBtn()" value=" 测试 " /> 
</body> 
</html> 
在 浏览 器 中 打开 该 网 页 ， 会 在 弹出 的 对 话 框 中 显示 文档 元 素 节点 的 数量 和 标记 信息 ， 效 
果 如 图 14-3 所 示 。 
= Esl 
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此 网 页 显示 : 


DOM 简 介 
本 文档 中 元 素 厂 点 的 总 数 为 : 11 
如 何 使 用 OM 它们 分 别 时 
测试 HTML .HEAD . META . TITLE . SCRIPT . BODY , Hl . P 
Pp.A.IN 
华 止 此 页 再 显示 对 话 框 . 


图 14-3 获取 元 素 节 点 的 个 数 和 信息 
当然 ， 还 可 以 通过 下 面 的 函数 来 完成 这 个 功能 。 
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function countTotalElement(node) { // 参数 node 是 一 个 Node 对 象 
var total = 0; 
if(node.nodeType == 1) { // 检查 node 是 否 为 Element 对 象 
total++; // 如 果 是 ， 计 数 器 加 1 
elementName = elementName + node.tagName + "\r\n"; // 保存 标记 名 
} 
for(var m=node.firstChild; m!=null;m=m.nextSibling) { 
total += countTotalElement(m); // 在 每 个 子 节点 上 进行 递归 操作 
} 
return total; 
} 


上 面 这 个 函数 大 致 一 看 和 前 面 实例 中 的 函数 差不多 ， 不 过 还 是 有 不 同 的 地 方 。 前 面 
的 函数 遍历 节点 时 用 的 是 childNodes[] 数组 ， 上 面 的 函数 是 通过 节点 的 fastChild 属性 和 
nextSibling 属性 来 完成 。 需 要 注意 的 是 , 在 使 用 DOM 的 时 候 只 有 当 页 面 中 的 元 素 加 载 完成 后 ， 
才能 进行 遍历 和 访问 节点 的 操作 。 

既然 能 够 遍历 文档 中 的 元 素 节 点 ， 那 么 获取 文本 节点 中 的 文本 也 一 定 能 实现 。 下 面 这 个 
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例子 说 明 如 何 获取 HIML 文档 中 的 文本 。 
这 个 例子 其 实 非常 简单 ， 只 需 对 上 面 的 函数 做 适当 的 改动 便 可 实现 。 由 于 要 访问 文本 节 
点 ， 这 里 只 需 判 断 node.nodeType 是 否 等 于 3 即 可 (文本 节点 的 nodeType 值 为 3) 。 本 实例 的 


关键 代码 如 下 : 
<script language="javascript"> 
var textContent = ""; // 全 局 变量 ， 保 存 文本 
function countTotalText(node) { // 参数 node 是 一 个 Node 对 象 
var total = 0; // 计数 器 
区 if(node.nodeType == 3 && ! 八 s/.test(node.nodeValue)) { // 检查 node 是 否 为 Text 对 象 ， 并 且 不 包含 空格 
totaltt; // 如 果 是 ， 计 数 器 加 1 
工 textContent = textContent + node.nodeValue +" 、 // 保存 文本 
一 ) 
三 for(var m=node.firstChild; m!=null;m=m.nextSibling) { 
Fe total += countTotalText(m); // 在 每 个 子 节点 上 进行 递归 操作 
ol 
6 } 
(@) return total; 
(q2) } 
(dp) function countBtn() 
ry { 
c= alert(' 本 文档 中 body 元 票 节点 下 的 文本 节点 总 数 为 :'+countTotalText(document.body) + \r\n 它们 分 
2 别 是 : \r\n' + textContent); 
PY textContent="; // 清空 全 局 变量 
(0) } 
9 </script> 
re Se , ; 古本 
~ 在 浏览 器 中 打开 该 网 页 并 测试 ， 页 面 会 弹出 一 个 对 话 框 ， 显 示 文档 文本 节点 的 数量 和 文 


本 信息 ， 效 果 如 图 14-4 所 示 。 
EE LaJ[lsI®[L 3] 
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DOM 简 介 此 网 页 显示 : 和 

如 何 使 用 OM 

测试 

化 14 音 关于 DOM 、DOM 简 介 、 如何 梗 用 、 DOM 
确定 


图 14-4 获取 文档 中 的 文本 内 容 
在 上 面 的 函数 中 ， 大 家 可 能 会 注意 到 ， 在 判断 一 个 节点 是 否 为 文本 节点 的 时 候 ， 上 面 的 
函数 与 以 前 的 函数 有 所 不 同 。 
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if(node.nodeType == 1) // 判断 节点 是 否 为 元 票 节点 
if(node.nodeType == 3 && I/\s/.test(node.nodeValue)) // 判断 节点 是 否 为 文本 节点 


为 什么 要 多 加 一 个 “&& !As/testtnode nodeValue)” 条 件 呢 ? 很 简单 ， 因 为 不 同 的 浏 
览 器 在 对 待 “ 空 格 ” 和 “ 回 车 ”时 的 处 理 办 法 不 同 ， 加 上 这 个 条 件 则 有 效 地 处 理 了 这 个 
问题 。 


叫 ) 14.6.3 ”操作 属性 节点 


在 DOM 中 ， ey 是 一 个 特殊 的 节点 。 它 表示 元 素 节 点 的 属性 ， 有 14、name、value 

属性 。 它 虽然 是 一 个 节点 ， 但 是 通过 类 似 于 childNodes、firstChild 等 一 系列 属性 访问 不 到 
它 。 然 而 我 们 可 Node 对 象 的 attributes 属性 ， 或 者 调用 Element 对 象 的 getAttribute() 
或 getAttributeNode() 方法 来 访问 。 
属性 节点 的 操作 ， 我 们 还 可 以 通过 createAttribute() 方法 来 创建 ， 通 过 setAttribute() 或 
后 方法 来 修改 或 添加 ， 通 过 removeAttribute() 或 removeAttributeNode() 方法 来 
删除 。 其 中 ， 经 常用 到 的 是 getAttribute() 和 setAttitude() 方法 。 

在 上 面 这 些 方法 中 ，getAttributeNode()、setAttributeNode() 和 removeAttributeNode() 三 个 
方法 操作 的 对 象 都 是 一 个 属性 节点 ， 其 他 的 则 是 属性 或 属性 值 。 对 于 attributes 属性 ， 它 的 功 
能 是 将 一 个 节点 的 属性 检索 到 一 个 集合 中 。 下 面 通过 实例 来 理解 这 些 方法 或 属性 是 如 何 使 
的 。 


妆 


下 面 的 例子 说 明 如 何 访问 一 个 属性 节点 。 


<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>DOM</title> 
<script language="javascript"> 
function testBtn(){ 
var myNode = document.getElementByld("btn'"); // 得 到 一 个 Element 节点 
var x=myNode.attributes["id"].nodeType; // 通过 attributes 属性 获取 Attr 节点 
if(x==2){alert(" 您 访问 到 的 是 一 个 属性 节点 ! ");} 
} 
</script> 
</head> 
<body> 
<h1> 第 14 章 关 于 DOM</h1> 
<pid="p1">DOM 简介 </p> 
<p> 如 何 使 用 <a href="#" name="link">DOM</a></p> 
<input type="button" onClick="testBtn()" value=" 测试 "id="btn"/> 
</body> 
</html> 


1dl13SeABr+ESSI+9TW1H 人 


测试 以 上 代码 会 在 网 页 中 弹出 一 句 “您 访问 到 的 是 一 个 属性 节点 ”。 如 果 要 访问 属性 节 
点 的 属性 值 ， 可 以 通过 节点 属性 nodeValue 来 获取 。 
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var myAttrNodeValue=myNode.getAttributeNode("id").nodeValue; 
当然 ， 还 有 更 简单 的 方法 。 


var myAttrNodeValue=myNode.getAttribute("id"); 


在 掌握 了 如 何 访问 属性 节点 的 方法 后 ， 再 来 学 习 如 何 修改 和 创建 属性 节点 就 轻松 多 了 。 
在 这 里 要 用 到 setAttribute() 或 setAtributeNode() 方法 。 

setAttribute() 方 法 是 把 指定 的 属性 设置 为 指定 的 字符 串 值 ,有 两 个 参数 “属性 ”和 “属性 值 ” 
如 果 该 属性 不 存在 ， 则 添加 一 个 新 属性 ， 其 语法 格式 如 下 : 


myNode.setAttribute("attribute","value"); 


setAttributeNode() 方法 是 把 指定 的 Attr 节点 添加 到 该 元 素 的 属性 列表 中 ， 参 数 为 一 个 属 
性 节点 。 如 果 当 前 属性 列表 中 已 经 有 一 个 同名 的 属性 ， 则 该 方法 将 用 新 属性 替换 原 属性 ， 并 
返回 被 替换 的 属性 ， 如 果 不 存在 这 样 的 属性 ， 则 该 方法 将 向 属性 列表 中 添加 一 个 新 属性 ， 其 
语法 格式 如 下 : 


myNode.setAttributeNodelatt_node) 


下 面 的 例子 说 明了 如 何 修改 HIML 文档 中 元 素 节点 的 属性 值 。 本 实例 的 关键 代码 如 下 : 


<script type="text/javascript"> 

function testBtn(){ 
var myNode = document.getElementByld("btn"); 
var x=myNode.getAttribute("value"); // 获取 原来 的 属性 值 
myNode.setAttribute("value", "test"); // 设置 属性 值 
var y=myNode.getAttribute("value");... . // 获取 新 的 属性 值 
alert( "value 的 属性 值 由 "+x+"" 变 成 了 "+y+"" 1 "); 
} 


</script> 
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把 上 面 的 代码 插入 页 面 中 ， 在 浏览 器 中 测试 时 ， 网 页 会 弹出 一 句 : value 的 属性 值 由 “ 测 
试 ” 变 成 了 “test”! 这 说 明 方法 setAttribute() 测试 成 功 。 下 面 再 来 看 看 setAttributeNode() 方 
法 如 何 使 用 。 

下 面 的 例子 说 明了 如 何在 元 素 节点 中 添加 属性 节点 。 本 实例 的 思路 如 下 ， 首 先 用 
createAttribute() 创建 一 个 name 属性 ， 然 后 设 属性 值 为 table1， 最 后 调用 setAttributeNode() 方 
法 。 关 键 代 码 如 下 : 


<script type="text/javascript"> 


function testBtn(){ 
var myNode = document.getElementByld("btn"); 
var newAtt=document.createAttribute("name"); // 创建 属性 节点 
newAtt.nodeValue="table1"; // 设置 属性 值 
myNode.setAttributeNode(newAtt); // 在 属性 列表 中 添加 新 属性 
if(hasAttribute("name")){ // 判断 是 否 添加 成 功 
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alert(" 新 属性 添加 成 功 ! "); 
} 
} 


</script> 


把 上 面 的 代码 插入 页 面 中 ， 在 浏览 器 中 测试 时 ， 网 页 会 弹出 一 名 “新 属性 添加 成 功 ”。 在 
上 面 的 函数 中 用 到 了 Element 对 象 的 hasAttribute( 方法 。 该 方法 用 于 判断 一 个 属性 节点 是 否 
存在 ， 有 一 个 参数 ， 表 示 待 判断 属性 是 否 存在 的 属性 名 称 ， 其 语法 如 下 : 


myNode.hasAttribute("attribute"); 


然而 , 正 浏览 器 没有 提供 hasAttribute() 方 法 ,所 以 以 上 代码 在 正 中 运行 是 看 不 到 效果 的 。 
不 过 ， 下 支持 getAttributeNode() 方法 。 这 就 需要 动 一 下 脑筋 ， 自 定义 一 个 函数 hasAttribute 
来 兼容 各 种 浏览 器 。 代 码 如 下 : 

function hasAttribute(elmNode,attribute){ // 传 入 两 个 参数 ， 元 票 节点 和 属性 


return elmNode.getAttributeNode(attribute) {= null; // 判断 属性 节点 是 否 为 空 
} 


要 判断 新 属性 是 否 添加 成 功 ， 可 以 用 以 下 代码 来 实现 。 


function testBtn(){ 

// 添加 节点 代码 省 略 

if(hasAttribute(myNode,"name")){alert(" 新 属性 添加 成 功 ! ");} 
} 
function hasAttribute(elmNode,name){ 

return elmNode.getAttributeNode("name")!=null; 
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在 对 属性 节点 的 操作 中 ， 删 除 也 是 常见 的 操作 之 一 。 要 删除 属性 ， 就 要 用 到 
removeAttribute() 和 removeAttributeNode() 方法 。 

removeAttribute() 方法 的 功能 是 从 元 素 节点 的 属性 列表 中 删除 指定 的 属性 ， 它 的 参数 是 
一 个 属性 名 ， 其 语法 格式 如 下 : 


myNode.removeAttribute("attribute"); 


removeAttributeNode() 方法 的 功能 是 从 元 素 节 点 的 属性 列表 中 删除 指定 的 属性 节点 ， 它 
的 参数 是 一 个 属性 节点 ， 其 语法 格式 如 下 : 


myNode.removeAttributeNodel(att_node); 


下 面 的 例子 说 明 如 何 删 除 元 素 节 点 的 属性 节点 。 本 实例 的 关键 代码 如 下 : 


function testBtn(){ 
var myNode = document.getElementByld("btn"); 
myNode.removeAttribute("class"); // 或 者 用 removeAttributeNodel() 方法 
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//var delNode=myNode.getAttributeNode("class"); 


//myNode.removeAttributeNode(delNode); 


if( myNode.getAttribute("class")==null){alert(" 属性 成 功 删 除 !");} 


} 


把 上 面 的 代码 插入 页 面 中 ， 在 浏览 器 中 测试 时 ， 页 面 会 弹出 一 句 “ 属 性 成 功 删除 ”， 这 


说 明 我 们 删除 节点 的 操作 是 正确 的 。 


叫 )》 14.6.4 ”创建 和 插入 节点 


如 下 : 


document.createElement("tagName"); 


法 格式 如 下 : 


tdocument.createTextNode("text"); 


function testBtn(){ 
var divNode=document.createElement("div"); 
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document.body.appendChild(divNode); 
} 


试 ” 按 钮 ， 页 面 效果 如 图 14-5 所 示 。 


数组 的 未 尾 。 参 数 只 有 一 个 , 表示 目标 节点 ， 
其 语法 格式 如 下 : 


parentNode.appendChild(nodeTolnsert); 
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将 上 面 代码 插入 网 页 中 并 运行 ， 单 击 “ 测 | 


在 上 面 的 代码 中 用 到 了 在 文档 中 插入 节 | 
点 的 方法 appendChild0， 该 方法 的 作用 是 把 | 
目标 节点 插入 当前 引用 节点 的 childNodes0 


讲 到 插入 节点 当然 不 能 忘 了 


就 不 同 ， 我 们 在 使 用 的 时 候 应 根据 实际 需求 调用 合适 的 方法 。 其 中 
上 一 节 讲 过 ， 下 面 来 看 一 下 其 他 常用 方法 的 含义 和 用 法 。 
createElement() 方法 用 于 创建 一 个 元 素 节点 ， 参 数 为 要 创建 的 元 素 名 ， 其 语法 格式 


DOM 提供 了 非常 丰富 的 创建 节点 的 方法 ， 如 createElement()、createTextNode()、 


createAttribute()、createDocumentFragment() 等 。 由 于 节点 的 类 型 不 一 样 ， 每 个 方法 的 功能 


Ph，createAttribute() 方法 在 


createTextNode() 方法 用 于 创建 一 个 文本 节点 ， 参 数 为 要 创建 文本 节点 的 文本 内 容 ， 其 语 


下 面 的 例子 说 明了 如 何在 HTML 文档 中 动态 插入 标签 和 文本 ， 关 键 代 码 如 下 : 


// 创建 一 个 元 票 节点 


var textNode=document.createTextNode("DOM 很 强大 ! "); // 创建 一 个 文本 节点 
divNode.appendChild(textNode); // 将 文本 节点 作为 最 后 一 个 子 节点 插入 元 票 节点 中 


// 将 元 票 节点 及 其 子 节点 插入 文档 中 
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DOM 简 介 

如 何 使 用 DOM 
DOM 很 强大 ! 
DOM 很 强大 ! 


insertBefore() 方法 ， 该 方法 的 作用 是 把 目标 
节点 插入 引用 节点 指定 的 子 节点 之 前 。 如 果 
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该 节点 已 经 存在 ， 则 先 删 除 再 插入 。 参 数 有 两 个 ， 第 一 个 为 目标 节点 ， 第 二 个 为 指定 子 节点 
用 于 控制 位 置 ， 该 参数 为 null 时 效果 与 appendChild0 方法 相同 ， 其 语法 格式 如 下 : 


parentOfBfeoreNode.appendChild(nodeTolnsert,beforelnsert); 


在 HIML 文档 中 插入 节点 的 功能 还 可 以 用 以 下 代码 来 实现 。 


function testBtn(){ 
var divNode=document.createElement("div"); 
var textNode=document.createTextNode("DOM 很 强大 ! "); 
var tagNode=document.getElementByld("btn"); 
divNode.insertBefore(textNode,null); 
document.body.insertBefore(divNode,tagNode); 

} 


将 上 面 的 代码 插入 网 页 中 并 运行 ， 单 击 
“测试 ”按钮 ， 页 面 效果 如 图 14-6 所 示 。 
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DOM 简 介 
如 何 使 用 DOM 
DOM 很 强大 ! 


DOM 很 强大 ! 
测试 


图 14-6 用 另外 一 种 方法 插入 文本 


在 浏览 器 中 ， 我 们 一 旦 把 节点 插入 document.body (或 者 后 代 节 点 ) 中 ， 页 面 便 会 更 新 并 
反映 这 个 变化 ， 对 于 少量 的 更 新 ， 实 例 中 的 方法 是 最 常用 的 方法 。 但 是 ， 当 我 们 有 大 量 的 数 
据 要 在 文档 中 添加 ， 或 者 要 多 次 调用 document.body.appendChild() 时 ， 页 面 的 加 载 效率 就 大 
打折 扣 。 这 个 时 候 使 用 文档 片段 就 非常 实用 。 
createDocumentFragment 方法 的 作用 是 创建 一 个 文档 碎片 ， 把 要 插入 的 新 节点 先 附加 在 它 上 
面 ， 然 后 再 一 次 性 添加 到 文档 中 ， 这 就 意味 着 页 面 内 容 只 更 新 一 次 ， 效 率 大 大 提高 。 代 码 如 下 ; 
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function testBtn(){ 
var newFragmeng = document.createDocumentFragment();  // 先 创建 文档 碎片 
for(var i=0;i<10000;i++){ 
var divNode = document.createElement("div"); 
var textNode = document.createTextNode("DOM 很 强大 ! "); 
divNode.appendChild(textNode); 


newFragmeng.appendChild(divNode); // 先 将 元 票 节点 插入 文档 碎片 中 
; 
document.body.appendChild(newFragmeng); // 最 后 一 次 性 插入 文档 中 
} 
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大 家 可 以 自己 测试 一 下 ， 看 看 页 面 的 加 载 效 果 在 时 间 上 有 什么 不 同 。 

另外 ， 我 们 可 以 实现 在 文档 中 添加 内 容 ， 还 可 以 直接 在 文档 中 插入 HIML 代码 。 这 
就 要 用 到 前 面 介绍 的 节点 属性 innerHTML。 这 个 属性 在 使 用 的 时 候 非常 简便 ,下 面 来 看 它 
是 如 何在 文档 中 添加 内 容 的 。 假 设 HTML 文档 中 有 一 个 id 为 p2 的 空 标记 <p>， 关 键 代码 


如 下 : 
function testBtn(){ 
var myNode=document.getElementByld("p2"); 
myNode.innerHTML="<div>DOM 很 强大 ! </div>"; 
} 


在 上 一 节 ， 我 们 知道 对 属性 节点 的 操作 是 一 个 非常 棘手 的 问题 。 事 实 上 ，innerHITML 的 
强大 之 处 在 于 它 能 很 好 地 避 开 这 个 问题 ， 直 观 地 设置 属性 节点 。 

假设 HIML 文档 中 有 一 个 id 为 divl 的 空 标记 <div>， 下面 的 示例 代码 说 明 如 何 动态 地 
向 divl 中 插入 表格 。 


function testBtn(){ 
var myNode=document.getElementByld("div1"); 
var strHTML="<table border='1' bordercolor='#000000' ><tr>"; 
strHTML+="<td bgcolor='#99CCFF' width='200' height='30'>innerHTML 很 好 用 </td>"; 
strHTML+="<td bgcolor='#99CCFF' width='200' height='30'>innerHTML 很 好 用 </td>"; 
strHTML+="</tr><tr>"; 
strHTML+="<td bgcolor='#99CCFF' >innerHTML 很 好 用 </td>"; 
strHTML+="<td bgcolor='#99CCFF' >innerHTML 很 好 用 </td>"; 
strHTML+="</tr></table>"; 
myNode.innerHTML=strHTML; 

} 
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把 上 面 的 代码 插入 网 页 中 并 运行 ， 效 果 如 图 14-7 所 示 ， 单 击 “ 测 试 ” 按 钮 后 页 面 效果 如 
图 14-8 所 示 。 
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第 14 章 关于 DOM 第 14 章 关于 DOM 
DOM 简 介 DOM 简 介 
如 何 使 用 DOM 如 何 使 用 DOM 
[as | linnerHTML 很 好 用 innerHTML 很 好 用 
linnerHTML 很 好 用 innerHTML 很 好 用 
LW 
图 14-7 单 击 “ 测 试 ”按钮 前 的 页 面 效 果 图 14-8 单 击 “ 测 试 ”按钮 后 的 页 面 效 果 
然而 ，innetHTML 并 没有 我 们 想象 中 的 那么 完美 。 首 先 ， 它 只 存在 于 HTML DOM 中 ， 
与 XML 文档 没有 关系 ; 其 次 ， 它 在 使 用 的 过 程 中 ， 如 果 原 来 的 元 素 节 点 中 有 子 节点 ， 它 会 
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用 新 内 容 完 全 替换 这 些 子 节点 ， 这 一 点 没有 直接 插入 节点 灵活 。 当 然 ， 它们 各 有 各 的 长 处 和 


优势 ， 我 们 在 使 用 的 时 候 根据 实际 情况 选择 合适 的 方法 即 可 。 
叫 ) 14.6.5 复制 节点 


在 向 HIML 文档 中 添加 节点 的 过 程 中 ， 有 时 并 不 需要 创建 新 的 节点 ， 而 是 在 文档 中 添加 


一 个 已 经 存在 的 节点 。 这 时 要 用 到 cloneNode() 方法 ， 该 方法 的 作用 是 创建 一 个 指定 节点 的 副 


本 。 它 有 一 个 参数 〈true 或 false) ， 该 参数 指示 被 复制 的 节点 是 否 包 括 原 节 点 的 所 有 属性 和 子 


节点 ， 其 语法 格式 如 下 : 


myNode.cloneNodeltrue |false); 


复制 后 的 新 节点 和 createElement() 一 样 ， 不 会 被 自动 插入 文档 。 要 插入 文档 ， 还 需要 用 


到 appendChild() 等 方法 。 


下 面 的 例子 说 明 如 何 复制 HIML 文档 中 的 按钮 控件 。 本 实例 的 关键 代码 如 下 : 


function testBtn(){ 
for(i=1;i<=20;i++){ 
var myNode=document.getElementByld("btn"); // 根据 id 查找 要 复制 的 节点 
var newNode=myNode.cloneNode(true); // 复制 节点 
newNode.setAttribute("id","btn"+i); // 为 新 节点 设置 id 
newNode.setAttribute("onClick"…,""); // 将 新 节点 的 事件 设置 为 空 
document.body.appendChild(newNode); // 将 新 节点 插入 文档 
} 


| 


把 上 面 的 代码 插入 网 页 中 并 运行 ， 单 击 “ 测 试 ” 按 钮 后 页 面 效 果 如 图 14-9 所 示 。 
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图 14-9 动态 添加 按钮 


叫 ) 14.6.6 ”替换 节点 


在 对 HTML 节点 的 操作 中 ， 蔡 换 操作 也 是 一 个 不 容 忽视 的 操作 。 Ce 


点 ，DOM 分 别 为 之 提供 了 不 同 的 方法 ， 如 replaceChild()、replaceData()。 


属性 节点 ， 


setAttribute() 方法 和 setAttributeNode() 方法 自身 就 带 有 替换 的 功能 ， 这 在 前 人 经 介绍 过 了 。 


下 面 来 看 其 他 方法 。 
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replaceChild() 方法 用 于 蔡 换 指定 节点 。 参 数 有 两 个 ， 第 一 个 为 要 替换 的 新 节点 ， 第 二 个 
为 被 替换 的 老 节点 ， 其 语法 格式 如 下 : 


myNode.replaceChild(newNode,oldNode); 


下 面 的 例子 说 明 如 何 蔡 换 HIML 文档 中 的 元 素 节点 。 本 实例 中 ， 先 创建 一 个 元 素 节点 ， 
再 创建 一 个 文本 节点 ， 并 将 文本 节点 插入 元 素 节点 之 后 ， 最 后 用 元 素 节点 替换 id 为 pl 的 元 
素 节点 。 关 键 代码 如 下 : 


function testBtn(){ 
var divNode=document.createElement("div"); 
var textNode=document.createTextNode("DOM 的 功能 很 强大 ， 一 定 要 掌握 它 的 用 法 。"); 


divNode.appendChild(textNode); // 将 文本 节点 插入 元 票 节点 形成 一 个 新 节点 
var myNode=document.body; // 父 节点 
var oldNode=document.getElementByld("p1"); // 被 替换 的 节点 
myNode.replaceChild(divNode,oldNode); // 替换 元 票 节点 
} 
把 上 面 的 代码 插入 网 页 中 并 运行 , 单 击 医生 二 | 
“测试 ”按钮 后 页 面 效 果 如 图 14-10 所 示 。 | > Ge HO |@ fie//HXTD/BR/HTMLS+CSS3+lovescriptmr.. 捷 | @ © 
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图 14-10 替换 元 素 节 点 


replaceData() 方法 用 于 替换 文本 节点 中 的 数据 。 该 方法 有 三 个 参数 : offset 表示 在 何 处 开 
始 替 换 字符 ， 值 以 “0” 开 始 ;， length 表示 要 替换 多 少 字符 ; string 表示 要 插入 的 字符 串 ， 其 
语法 格式 如 下 : 


myNodereplaceData(offset,length, string); 


下 面 的 例子 说 明 如 何 替 换 HTML 文档 中 动态 生成 文本 节点 。 在 上 个 实例 中 ， 替 换 元 素 节点 
的 过 程 中 ， 动 态 添加 了 一 个 文本 节点 。 下 面 来 看 看 如 何 改变 这 个 文本 节点 的 值 ， 关 键 代码 如 下 : 


function testBtn(){ 
var divNode=document.createElement("div"); 
var textNode=document.createTextNode("DOM 的 功能 很 强大 ， 一 定 要 掌握 它 的 用 法 。"); 


divNode.appendChild(textNode); // 将 文本 节点 插入 元 票 节点 形成 一 个 新 节点 
var myNode=document.body; 1/ 父 节点 

var oldNode=document.getElementByld("p1"); // 被 替换 的 节点 
myNode.replaceChild(divNode,oldNode); // 蔡 换 元 票 节点 
textNode.replaceData(0,15," 使 用 replaceDatal) 替换 动态 生成 的 文本 ! "); // 替换 文本 节点 


第 14 章 JavaScript 事件 和 DOM 
把 上 面 的 代码 插入 网 页 中 并 运行 ， 单 击 “ 测 试 ” 按 钮 后 页 面 效 果 如 图 14-11 所 示 ， 大 家 
可 以 和 图 14-10 进行 比较 。 
当然 ， 关 于 替换 文本 节点 还 可 以 通过 重 设 节点 的 属性 nodeValue 的 值 来 进行 设 定 ， 代 码 如 下 : 


textNode.nodeValue=" 使 用 节点 的 nodeValue 属性 蔡 换 文本 内 容 ! "; 


图 14-12 所 示 就 是 上 段 代码 插入 网 页 后 的 运行 效果 。 
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第 14 章 关于 DOM 第 14 章 关于 DOM 
使 用 replaceData() 莫 挽 动态 生成 的 文本 ! 的 使 用 。 使 用 节点 的 nodeValue 属 性 苦 换 文本 内 容 ! 
如 何 使 用 DOM 如 何 使 用 DOM 
[ms | E73 
图 14-11 使 用 replaceData() 替换 文本 图 14-12 使 用 节点 属性 替换 文本 


叫 ) 14.6.7 删除 节点 


在 DOM 中 ， 同 创建 和 插入 节点 操作 一 样 ， 删 除 操作 也 是 十 分 重要 和 频繁 的 。 用 户 在 用 
DOM 对 HTML 文档 进行 操作 的 过 程 中 ， 页 面 难免 会 生成 一 些 无 用 的 节点 ， 这 个 时 候 就 很 有 
必要 将 它们 删除 。 删 除 节点 常见 的 方法 就 是 removeChild)， 其 语法 格式 如 下 : 


myNode.removeChild(delNode); 


下 面 的 例子 说 明 如 何 通过 删除 和 插入 操作 来 颐 倒 HIML 文档 的 节点 顺序 。 本 实例 在 调 
的 过 程 中 先 传 入 一 个 节点 参数 ， 并 获取 节点 的 所 有 子 节点 ， 用 一 个 for 循环 逆向 遍历 子 节 点 ， 
依次 删除 子 节点 ， 并 将 其 插入 节点 列表 的 尾部 。 关 键 代码 如 下 : 
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function testBtn(node){ 
var delNode=node| |document.body; // 为 节点 delNode 赋值 ， 传 入 参数 为 空 时 用 默认 值 
var myNodes=delNode.childNodes; // 获取 节点 的 子 节点 
for(var i=myNodes.length-1;i>=0;i-- ){ // 遍历 子 节点 
var newNode=delNode.removeChild(myNodes[]); /删除 子 节点 
node.appendChild(newNode); // 将 删除 的 子 节点 插入 节点 列表 的 尾部 
} 
} 


7 14.7 练习 题 


一 、 填 空 题 
1. 在 标准 事件 模型 中 ， 注 册 事件 处 理 程序 需要 使 用 方法 。 
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2. 单 击 按钮 时 会 触发 3 个 事件 ， 依 次 是 onmousedown、onmouseup 和 
3. 在 DOM 中 每 个 HIML 标签 是 一 个 节点 。 
4. 要 使 用 DOM 获取 节点 的 值 应 该 调用 属性 。 
、 选 择 题 

图 像 装载 被 中 断 时 触发 事件 。 

onload 

。onunload 

onabort 

onclick 

事件 传播 的 3 个 阶段 不 包括 

. 起 泡 阶段 

冒 泡 阶 段 

捕捉 阶段 

事件 阶段 

在 DOM 树 中 使 用 表示 整个 文档 。 
Document 

Node 

NodeList 

. Element 

要 从 HTML 中 删除 一 个 节点 ， 可 以 使 用 方法 。 
. removeChild() 

. removeNode() 

. IemoveAttr() 

. removeElement() 


< 上 机 练习 : 实现 分 类 管理 


本 次 上 机 练习 的 要 求 是 ， 通 过 一 个 文本 框 和 按钮 动态 地 在 页 面 中 添加 新 的 分 类 信息 ， 同 
时 还 可 以 删除 分 类 。 使 用 的 知识 点 包括 创建 节点 、 插 入 节点 、 删 除 节点 、 设 置 元 素 节点 属性 
等 操作 。 案 例 最 终 运行 效果 如 图 14-13 所 示 。 
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图 14-13 分 类 管理 
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在 本 章 之 前 , 我 们 已 经 通过 大 量 的 知识 和 案例 介绍 了 HTML5、CSS3 以 及 Javascript 的 相 
关内 容 。 通 过 HTML5、CSS3 和 JavaScript 脚本 技术 的 结合 ， 不 仅 可 以 制作 美观 、 功 能 强大 的 
网 页 ， 还 可 以 制作 经 典 的 游戏 ， 绘 制 经 典 的 动画 。 

俄罗斯 方块 、 手 机 泡 泡 龙 、 开 心 消 消 乐 、 切 水 果 、 贪 吃 蛇 、 中 国 象棋 、 五 子 棋 、 超 级 玛 
丽 等 经 典 游戏 都 可 以 通过 本 书 介绍 的 内 容 实现 。 本 章 将 通过 多 个 经 典 案例 演示 HTML5、CS53 
以 及 JavaScript 脚本 的 应 用 。 
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97) 15.1 打 地 鼠 游 戏 


提 到 打 地 鼠 ， 不 管 是 街 边 的 游戏 机 还 是 手机 上 的 游戏 ， 相 信 大 家 一 定 玩 过 或 者 见识 过 。 
本 节 案 例 将 结合 JavaScript、CSS 和 HIML 等 内 容 编写 一 个 简单 的 打 地 鼠 游戏 。 


叫 )》 15.1.1 打 地 鼠 游戏 简介 


打 地 鼠 是 大 家 耳熟能详 的 一 款 经 典 的 小 游戏 。 本 游戏 基于 Windows 7 操作 系统 ， 最 终 将 
以 HTML 文件 的 形式 完成 ， 需 要 使 用 Chrome 或 Firefox 等 浏览 器 打开 才能 看 到 游戏 的 最 终 效 
果 。 另 外 ， 本 游戏 将 采用 JavaScript 实现 整个 逻辑 流程 ， 所 以 建议 没有 JavaScript 基础 的 读者 
好 好 学 习 JavaScript 教程 。 

本 节 实 现 的 打 地 鼠 游 戏 的 功能 包含 ， 得 分 统计 、 计 算命 中 率 、 地 鼠 图 片 的 显示 和 隐藏 、 
判断 是 否 打 中 地 鼠 、 错 误 提示 和 最 终 的 结果 显示 。 

游戏 流程 设计 包含 以 下 几 点 。 
单 击 “开始 游戏 ”按钮 游戏 开始 ， 否 则 将 提示 “请 点 击 开 始 游戏 ”字样 。 
游戏 开始 时 ， 分 数 、 命 中 率 显 示 重 置 为 “0”， 倒 计时 开始 ( 默认 为 30 秒 ) 。 
在 玩 游戏 的 过 程 中 ， 地 上 鼠 图 片 需要 不 断 显 示 、 隐 藏 。 
玩家 可 单 击 鼠 标 左 键 进行 游戏 。 
当 30 秒 倒计时 结束 或 者 玩家 主动 单 击 “ 结 束 游戏 ”按钮 和 时， 游戏 结束 并 显示 游戏 结果 。 
15-1 所 示 为 单 击 “ 开 始 游戏 ”按钮 开始 时 的 截图 。 


轩 e ee e 


GC | © file///D/exam/mouse/mouse.html 


| 开始 游戏 | | 结束 游戏 
命中 率 : 0 
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图 15-1 打 地 饼 游 戏 截 图 
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叫 )》15.1.2 界面 设计 
打 地 所 游戏 非常 简单 ,并 未 添加 其 他 丰富 的 游戏 设计 


其 目的 是 想 带 领 大 家 从 简洁 的 


自然 离 不 
计 游 戏 页 面 时 ， 将 采用 <table> 标签 
网 页 主体 代码 如 下 ; 


<div id="content"> 


游戏 逻辑 设计 中 清楚 地 体会 到 从 设计 到 
根据 图 15-1 所 示 的 效果 开发 游戏 。 首先 需要 设计 HTML 网 页 , 游戏 通过 HTML 文件 实现 ， 
html 标签 。 常 见 的 打 地 鼠 游戏 都 是 规整 的 几 个 固定 位 置 随机 出 现 老鼠 ， 因 此 在 设 
来 布局 ， 得 分 、 命 中 率 等 结果 显示 将 使 用 <input> 标签 。 


<input type="button" value=" 开始 游戏 " onClick="GameStart()"> 


<input type="button" value=" 
<form name="form1"> 
<label> 分 数 ; 
<input type="text" name="score" size="5"> 
<label> 命中 率 : 
<input type="text" name="success" size="10"> 
<label> 倒计时 : </label> 

<input type="text" name="remtime" size="5"> 


</label> 


</label> 


</form> 

<table> 

<tr> 

<td id="td[0]" onClick="hit(0)"></td> 
<td id="td[1]"onClick="hit(1)"></td> 
<td id="td[2]" onClick="hit(2)"></td> 
<td id="td[3]" onClick="hit(3)"></td> 
<td id="td[4]" onClick="hit(4)"></td> 
</tr> 

<!-- 省 略 其 他 代码 -> 


</table> 


</div> 


网 页 设计 完成 后 ， 
表格 的 宽度 、 高 度 、 背 


晤 出 


<style type="text/css"> 
#content { 
width: 960px; 
margin: 0 auto; 
text-align: center; 
} 
table { margin: 0 auto; } 
table:hover { cursor:url(img/chuizi.png'),auto;/* 此 处 
td{ 


为 网 页 中 的 标签 元 素 添加 样式 代码 ， 主 要 设计 游戏 容 
等 内 容 。CSS 代码 如 下 ; 


结束 游戏 " onClick="GameOver()"> 


日 


图 片 路 径 要 依据 自己 的 路 径 来 修改 */} 


， 也 没有 添加 动画 、 声 音 等 特殊 效果 ， 
发 、 完 善 的 乐趣 。 
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width: 95px; 
height: 95px; 
background-color: #00ff33; 
} 

</style> 


咱 ) 15.1.3 ”实现 脚本 
各。 HTML 网 页 主体 代码 和 样式 代码 设计 完毕 后 ， 还 需要 添加 JavaScript 脚本 代码 ， 实 现 地 
鼠 的 显示 、 隐 藏 、 命 中 率 计 算 等 功能 。 
0 本 在 JavaScript 脚本 中 声明 多 个 变量 ， 分 别 用 于 保存 每 个 格子 的 地 鼠 、 游 戏 是 否 开始 、 


| 分数、 鼠标 单 击 次 数 、 命 中 率 等 内 容 。 声 明代 码 如 下 : 
三 <script> 
a var td = new Array(), // 保存 每 个 格子 的 地 鼠 
© playing = false, // 游戏 是 否 开 始 
=0, // 分 数 
nD score=0, 
nD beat = 0, // 鼠标 单 击 次 数 
Go success =0, // 命中 率 
二 knock =0, // 鼠标 点 中 老鼠 图 片 次 数 
v9 countDown = 30, // 倒计时 
SS interld = null, // 指定 setinterval() 的 变量 
(1 timeld = null; // 指定 setTimeout() 的 变量 
9 人 * 其 他 实现 代码 */ 
my 
5 <script> 
> 


轩 如 创建 GameOver0 函数 ， 当 游戏 结束 时 会 调用 该 函数 , 在 该 函数 中 需要 提示 游戏 结束 ， 
并 且 显 示 得 分 和 命中 率 ， 同 时 指定 success、score、knock 等 变量 的 值 。 代 码 如 下 : 


functionGameOver(){ 
timeStop!(); 
playing = false; 
clearMousel(); 
alert(" 游戏 结束 ! \n 你 获得 的 分 数 为 : "+score+"\n 命中 率 为 : "+success); 


success = 0; 


score=0; 

knock = 0; 

beat = 0; 
countDown = 30; 


} 


轩 结 创建 tmeShow0 函数 ， 该 函数 显示 当前 倒计时 所 剩 的 时 间 。 如 果 剩 余 时 间 为 0， 则 
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调用 GameOver() 函数 ， 并 返回 ， 否 则 将 countDown 变量 的 值 减少 1， 并 指定 timeld 变量 的 值 。 
代码 如 下 : 


functiontimeShow(){ 

document.form1.remtime.value = countDown; 
if(countDown == 0){ 

GameoOver(); 

return; 

Jelse{ 

countDown = countDown-1; 

timeld = setTimeout("timeShow()",1000); 


} 


在 设计 timeld 变量 的 值 时 ， 调 用 setTimeout() 函数 。 该 函数 用 于 在 指定 的 毫秒 数 后 调 
函数 或 计算 表达 式 〈 只 执行 一 次 ， 可 通过 创建 一 个 函数 循环 重复 调用 setTimeout() 来 实现 重 
复 操 作 ) 。 

厢 怕 创建 timeStop0 函数 ， 该 函数 主动 停止 所 有 计时 。 代 码 如 下 : 


functiontimeStop(){ 
clearlnterval(interld);//clearlnterval() 方法 返回 setinterval() 方法 的 id 
clearTimeout(timeld);//clearTime() 方法 返回 setTimeout() 的 id 

} 


加 吕 创建 show0 函数 ， 该 函数 随机 循环 显示 老鼠 图 片 。 代 码 如 下 : 


function show(){ 
if(playing) { 
var current = Math.floor(Math.random()*25); 
document.getElementByld("td["+current+"]").innerHTML = '<imgsrc="img/mouse.png">'; 
// 使 用 setTimeout() 实现 3 秒 后 隐 世 老鼠 图 片 
setTimeout("document.getElementByld('td["+current+"]'").innerHTML="",3000); 
1 
} 


0 06》 创建 clearMouse() 函数 ， 清 除 所 有 图 片 。 代 码 如 下 : 


functionclearMouse(){ 
for(var i=0;i<=24;i++) { 
document.getElementByld("td["+i+"]").innerHTML=""; 
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加 入 创建 件 函 数 hit)， 用 于 判断 玩家 是 否 点 中 地 鼠 。 代 码 如 下 : 


function hit(id){ 
if(playing==false) { 
alert(" 请 点 击 开始 游戏 "); 


return; 
}else{ 
beat +=1; // 点 击 次 数 +1 
if(document.getElementByld("td["+id+"]").innerHTML!="") { 
score += 1; // 得 分 +1 
knock +=1; // 点 中 地 鼠 次 数 +1 
success = knock/beat; // 计算 命中 率 


document.form1.success.value = success; 

document.form1.score.value = score; 

document.getElementByld("td["+id+"]").innerHTML=""; 
}else{ 

score += -1; 

success = knock/beat; 

document.form1.success.value = success; 


document.form1.score.value = score; 


} 


在 该 函数 中 ， 首 先 判断 玩家 是 否 开始 游戏 ， 如 果 没 有 单 击 “开始 游戏 ”按钮 ， 需 要 给 出 
相应 提示 。 如 果 游戏 已 开始 ,将 鼠标 单 击 次 数 加 1， 然 后 判断 是 否 击 中 地 鼠 。 如 果 地 鼠 被 击 中， 
得 分 和 地 鼠 击 中 次 数 都 加 1， 计 算命 中 率 ， 并 为 网 页 中 的 提示 框 赋值 ， 如 果 地 鼠 未 被 击 中， 
得 分 减 1， 计 算命 中 率 ， 并 重新 为 提示 框 赋值 。 

98 创建 游戏 开始 函数 GameStart0)， 在 该 函数 中 指定 playing 和 interId 变量 的 值 ， 并 为 
页 面 中 的 提示 框 赋值 。 代 码 如 下 : 
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functionGameStart(){ 
playing = true; 
interld = setInterval("show!()",1000); 
document.form1.score.value = score; 
document.form1.success.value = success; 
timeShow!(); 


} 


到 这 里 ， 打 地 鼠 游 戏 的 代码 已 全 部 介绍 完毕 。 运 行 HTML 网 页 并 单 击 按钮 进行 测试 ， 具 
体 的 效果 图 不 再 显示 。 
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6 15.2 经 典 贪 吃 蛇 游戏 


贪 吃 蛇 游戏 是 一 款 非 常 经 典 的 益 智 游戏 ， 有 PC 和 手机 等 多 平台 版 本 ， 既 简单 又 耐 玩 。 
该 游戏 通过 控制 蛇 头 方向 吃 蛋 ， 从 而 使 得 蛇 变 得 越 来 越 长 。 本 节 通 过 HTML+CSS 设计 网 页 ， 
同时 结合 JavaScript 脚本 实现 贪 吃 蛇 的 吃 “ 子 ”功能 。 


川 )》 15.2.1 贪 吃 蛇 游 戏 简介 

从 贪 吃 蛇 开发 的 最 初 到 现在 ， 该 游戏 已 经 经 历 多 个 版 本 。 本 节 案例 实现 相对 简单 的 一 个 
版 本 ， 通 过 HTML 文件 显示 最 终 效果 ， 用 CSS 设置 网 页 标签 的 样式 ， 用 JavaScript 控制 贪 吃 
蛇 的 动作 行为 。 

贪 吃 蛇 游戏 的 设计 过 程 如 下 。 

e 通过 单 击 页 面 的 按钮 或 者 按键 盘 的 上 下 左右 四 个 键 控制 蛇 移 动 的 方向 。 

®@ 贪 吃 蛇 寻找 吃 的 东西 ， 每 吃 一 口 就 能 得 到 一 定 的 积分 ， 而 且 蛇 的 身子 会 越 吃 越 长 。 

e 贪 吃 蛇 吃 “ 子 ” 越 多 ， 身 子 就 会 越 长 ， 身 子 越 长 玩 的 难度 就 越 大 ， 不 能 碰 墙 ， 不 能 咬 到 

自己 的 身体 ， 更 不 能 咬 自己 的 尾巴 ， 否 则 游戏 结束 。 
图 15-2 所 示 为 贪 吃 蛇 游戏 运行 过 程 中 单 击 Pause 时 的 截图 。 
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图 15-2 贪 吃 蛇 游戏 


川 ) 15.2.2 页 面 设计 


读者 需要 根据 图 15-2 所 示 的 效果 设计 HTML 网 页 。 与 打 地 鼠 游戏 一 样 ， 该 游戏 通过 
HIML 文件 实现 ， 当 然 需要 用 到 html 标签 。 在 网 页 的 主体 部 分 ， 包 含 一 个 div 总 容器 ， 该 容 
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含 两 个 div 子 容器 。 第 一 个 div 子 容 器 用 于 绘制 贪 吃 蛇 图 形 , 第 二 个 div 子 容器 包含 得 分 
作 贪 吃 蛇 的 功能 按钮 。 
HIML 静态 网 页 的 代码 如 下 : 


<div id="page"> 

<div id="yard"><canvas id="canvas" height="600px" width="800px"></canvas></div> 
<div id="help"> 

<div id="mark"><center> 得 分 : <span id="mark_con"></span></center></div> 

<div id="helper"> 

<table> 

<tr><td></td><td><button onClick="keydown(38);"> 上 </button></td><td></td></tr> 
<tr><td colspan="3"></td></tr> 

<tr> 

<td><button onClick="keydown(37);"> 左 </button></td> 

<td><button onClick="keydown(80);" id="pause">Pause</button></td> 

<td><button onClick="keydown(39);"> 右 </button></td> 

</tr> 

<tr><td></td><td><button onClick="keydown(40);"> 下 </button></td><td></td></tr> 
<tr><td colspan="3"></td></tr> 

<tr><td colspan="3"><center><button onClick="window.location.href='index.html" > 再 玩 一 次 </button></ 


center></td></tr> 


</table> 
</div> 
</div> 
</div> 


为 上 个 页 面 中 的 标签 添加 样式 代码 ， 首 先 设置 网 页 的 整体 样式 ， 例 如 字体 、 间 距 等 。 代 
下 : 

*{margin:0;padding: 0;font-family: "Microsoft YaHei";} 

接着 设置 总 容器 的 宽度 、 高 度 、 到 顶部 的 距离 等 样式 。 代 码 如 下 : 


#page{margin-right:auto;margin-left: auto; margin-top: 20px;height: 600px; width: 1000px; } 


设置 绘制 贪 吃 蛇 图 形 的 容器 的 宽度 、 阴 影 样式 、 边 框 样式 等 内 容 。 代 码 如 下 : 
#yard{ width: 800px;border: 1px solid gray;box-shadow: 0 0 10px black; float: right;} 
为 显示 贪 吃 蛇 的 得 分 的 div 容器 添加 以 下 样式 : 


#mark{font-size:24px;font-weight: 800;} 


#mark_con{ color: red; } 


最 后 设计 操作 贪 吃 蛇 按钮 的 样式 ， 如 按钮 的 宽度 、 高 度 、 颜 色 、 加 粗 样式 、 圆 角 、 边 框 
背景 颜色 等 。 代 码 如 下 : 


button{ 
width: 60px; height:30px; color:white;font-weight:bold; border:#A032F9 solid 1px; 
border-radius:4px; display:inline-block; 
background:-moz-linear-gradient(top, #BF6BFE, #9114F5); 
background:-o-linear-gradient(top, #BF6BFE, #9114F5); 
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#BF6BFE), to(#9114F5)); 
background:linear-gradient(top, #BF6BFE, #9114F5); 

} 


button:hover{background:#A032F9; filter:none; text-decoration:none;} 


必 ) 15.2.3 ”脚本 实现 


上 一 小 节 已 经 设计 了 贪 吃 蛇 游戏 的 HIML 页 面 和 CSS 样式 代码 ， 本 节 在 前 面 的 基础 上 
添加 JavaScript 脚本 实现 代码 ， 主 要 步骤 如 下 。 

办 声明 3 个 伪 常 量 ，BLOCK_SIZE 表示 绘制 的 格子 的 大 小 ，COLS 和 了 ROWS 分 别 表示 
绘制 的 列 数 和 行 数 。 代 码 如 下 : 


<script> 
var BLOCK_SIZE = 20; // 格子 大 小 
var COLS = 40; /1/ 列 数 
var ROWS = 30; // 行 数 
/* 省 略 其 他 代码 */ 
</script> 


四 史 继续 声明 一 系列 的 变量 , 分别 用 于 保存 蛇 坐 标 、 绘 制 对 象 、 行 进 方向 \ 蛇 身 数量 等 内 容 。 
声明 代码 如 下 : 
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var snakes = []; // 保存 蛇 坐 标 
var c= null; // 绘图 对 象 
vartoGo = 3; // 行进 方向 
varsnakecount = 4; // 蛇 身 数量 

var interval = null; // 计时 器 
varfoodX = 0; // 食物 X 轴 坐标 
varfoodY = 0; // 食物 Y 轴 坐标 
varoMark = null; // 分 数 显示 框 
varisPause = false; // 是 否 暂停 


加 3》 自 定义 draw0 函数 ， 该 函数 包含 4 部 分 ， 第 一 部 分 绘制 横向 ， 第 二 部 分 绘制 竖 线 ， 
第 三 部 分 绘制 蛇 身 ， 第 四 部 分 绘制 食物 。 完 整 代码 如 下 : 


function draw(){ 
c.clearRect(0,0,BLOCK_SIZE * COLS, BLOCK_SIZE * ROWS); 
// 画 出 横 线 
for(vari= 1;i<= ROWS;i++){ 
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添加 食物 ， 调 用 绘制 图 形 的 draw() 函数 ， 将 最 终 的 结果 显示 到 页 五 


c.beginPath(); 

c.moveTo(0,i* BLOCK_SIZE); 
c.lineTo(BLOCK_SIZE * COLS,i* BLOCK_SIZE); 
c.strokeStyle = "gray"; 


c.stroke(); 

} 

// 画 出 坚 线 

for(var i = 1; i <= COLS; i++){ 
c.beginPath(); 
c.moveTo(i* BLOCK_SIZE, 0); 
c.lineTo(i * BLOCK_SIZE, BLOCK_SIZE * ROWS); 
c.stroke(); 

} 

// 画 出 蛇 

for (var i = 0; i <snakes.length; i++){ 
c.beginPath(); 
c.fillstyle = "blue"; 
c.fillRect(snakes[i].x, snakes[i].y, BLOCK_SIZE, BLOCK_SIZE); 
c.moveTo(snakes[i].x, snakes[i].y); 
c.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y); 
c.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y + BLOCK_SIZE); 
clineTo(snakes[i].x, snakes[i].y + BLOCK_SIZE); 
c.closePath(); 
c.strokeStyle = "white 
c.stroke(); 

} 

// 画 出 食物 

c.beginPath(); 

cfillStyle = "red 


c.fillRect(foodX, foodY BLOCK_SIZE, BLOCK_SIZE); 
c.moveTo(foodX, foodY); 
clineTo(foodX + BLOCK_SIZE, foodY); 


c.lineTo(foodX + BLOCK_SIZE, foodY + BLOCK_SIZE); 


c.lineTo(foodX, foodY + BLOCK_SIZE); 


c.closePath(); 
Cc.stroke(); 
定义 start( 函数 ， 游 戏 初始 化 时 会 调 


function start(){ 


for(var i = 0; i <snakecount; i++){ 


该 函数 。 在 该 函数 中 ， 指 定 蛇 头 坐 标 并 且 


。 代 码 如 下 : 


} 


05 
的 操作 。 


snakes[i] = {x: i * BLOCK_SIZE, y: 0}; 


} 

addFood(); // 添加 食物 
draw(); // 绘制 图 形 
oMark.innerHTML = 0; // 显示 绘制 的 内 容 


自 定义 move() 移动 函数 ， 判 断 贪 吃 蛇 的 移动 方向 ， 根 据 上 下 左右 四 个 方向 进行 不 同 
代码 如 下 : 


function move(){ 


1 


switch(toGo){ 
case 1: // 左边 
snakes.push({x: snakes[snakecount - 1].x - BLOCK_SIZE, y: snakes[snakecount - 1].y}); 
break; 
case 2: // 上边 
snakes.push({x: snakes[snakecount - 1].x, y: snakes[snakecount - 1].y - BLOCK_SIZE}); 
break; 
case 3: // 右边 
snakes.push({x: snakes[snakecount - 1].x + BLOCK_SIZE, y: snakes[snakecount - 1].y}); 
break; 
case 4: // 下边 
snakes.push({x: snakes[snakecount - 1].x, y: snakes[snakecount - 1].y + BLOCK_SIZE}); 
break; 
default:; 
} 
snakes. shift(); 
isEat(); 
isDie(); 
draw(); 


自 定义 isEat0 函数 ， 该 函数 用 于 判断 贪 吃 蛇 是 否 吃 到 食物 ， 如 果 吃 到 食物 ， 更 改 贪 


吃 蛇 的 长 度 并 添加 新 的 食物 。 代 码 如 下 


function isEat(){ 
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if (snakes[snakecount - 1].x == foodX&& snakes[snakecount - 1].y == foodY) { 
oMark.innerHTML = (parselnt(oMark.innerHTML) + 1).toString(); 
addFood(); 
addSnake(); 


自 定义 表示 蛇 身 的 addSnake0 函数 ， 蛇 身 由 一 系列 方 格 组 成 ， 初 始 设 定 蛇 身 的 长 度 
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是 4， 以 后 每 吃 到 一 次 食物 就 增加 1。 代 码 如 下 : 


function addSnake(){ 
snakecount++; 


snakes.unshift({x:BLOCK_SIZE * COLS, y:BLOCK_SIZE * ROWS}); 
} 


看 如 自 定义 keydown() 函数 ， 它 是 一 个 交互 响应 函数 ， 当 用 户 按 下 键盘 上 的 上 、 下 、 左 、 
右 、 开 始 、 暂 停 中 的 任何 一 个 键 时 ， 会 触发 该 函数 ， 执 行 相应 的 操作 。 代 码 如 下 ;: 


function keydown(keyCode){ 
switch(keyCode){ 

case 37: // 左边 
if(toGo != 1 &&toGo != 3) 
toGo=1; 
break; 

case 38: // 上 边 
if(toGo != 2 &&toGo != 4) 
toGo=2; 
break; 

case 39: // 右边 
if(toGo != 3 &&toGo != 1) 
toGo=3; 
break; 

case 40: // 下 的 
if(toGo != 4 &&toGo != 2) 
toGo=4; 
break; 

case 80: // 开始 /暂停 
if(lisPause){ 

interval = setlnterval(move,100); 
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isPause = false; 

document.getElementByld('pause').innerHTML = "Pause"; 
jelsef 

clearlnterval(interval); 

isPause = true; 

document.getElementByld('pause').innerHTML = "Start"; 
} 


break; 


} 


看 四 自 定义 addFood() 函数 ， 该 函数 表示 制造 食物 ，foodX 和 foodY 分 别 表示 食物 的 六 
轴 坐 标 和 YY 轴 坐 标 ， 这 两 个 坐标 是 随机 生成 的 。 代 码 如 下 : 
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function addFood(){ 
foodX = Math.floor(Math.random() * (COLS - 1)) * BLOCK_SIZE; 
foodY = Math.floor(Math.random() * (ROWS - 1)) * BLOCK_SIZE; 


} 
入 自 定义 isDie0 函数 ， 判 断 贪 吃 蛇 是 否 死亡 ， 并 给 出 相应 的 提示 信息 。 代 码 如 下 ;: 


function isDie(){ 
if(snakes[snakecount - 1].x == -20 || snakes[snakecount - 1].x == BLOCK_SIZE * COLS 
|| snakes[snakecount - 1].y == -20 || snakes[snakecount - 1].y == BLOCK_SIZE* ROWS){ 
alert("Game Over!"); 
clearlnterval(interval); 
} 
for(var i = 0; i <snakecount - 1; i++){ 
if(snakes[snakecount - 1].x == snakes[i].x && snakes[snakecount - 1].y == snakes[i].y){ 
clearlnterval(interval); 
alert("Game Over!"); 


} 


三 调用 HTML 网 页 的 加 载 事 件 ， 当 页 面 启 动 时 调用 该 事件 中 的 代码 ， 绘 制图 像 ， 并 且 
调用 对 应 的 函数 显示 内 容 。 代 码 如 下 : 


window.onload = function(){ 

c= document.getElementByld('canvas').getContext('2d'); 

oMark = document.getElementByld('mark_con'); 

start(); 

interval = setlnterval(move,100); 

document.onkeydown = function(event){ 
Var event = event | | window.event; 
keydown(event.keyCode); 


到 这 里 ， 关 于 贪 吃 蛇 的 所 有 代码 已 经 编写 结束 ， 读 者 可 以 运行 页 面 进行 测试 ， 具 体 的 效 
果 可 以 参考 图 15-2， 其 他 效果 图 不 再 显示 。 


) 7) 15.3 ”绘制 呆 荫 的 小 猫 笑 脸 


CSS3 的 强大 之 处 在 于 ， 设 计 者 不 需要 写 JavaScript 代码 即 可 绘制 任意 图 形 ， 甚 至 是 实现 
一 些 简 单 的 动画 特效 。 本 节 主 要 通过 CSS3 属性 绘制 呆 萌 的 小 猫 笑脸 ， 这 是 CSS3 非常 典型 
的 案例 。 
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必 ) 15.3.1 效果 展示 

本 例 通过 HIML 文件 的 标签 设计 静态 页 面 ， 用 CSS3 的 相关 属性 美化 标签 样式 ， 制 作出 
呆 萌 可 爱 的 小 猫 。 本 例 不 仅 用 CSS3 绘制 了 小 猫 的 脸 部 ， 而 且 小 猫 的 眼睛 和 耳 采 还 会 动 ， 十 
分 可 爱 。 
图 15-3 所 示 为 页 面 的 运行 效果 。 


TSJIEIET 受 
口 纯 CsS3 给 制 的 小 瑾 < 验 x = 口 续 CSs3 索 制 的 小 FE X = 


GC | © filey///D:/exam/cat/index html 旬 食 | 5; © | © file///D:/exam/cat/index.html 


图 15-3 采 萌 的 小 猫 


叫 ) 15.3.2 静态 页 面 


读者 可 以 根据 图 15-3 所 示 的 效果 设计 页 面 。 在 页 面 的 主体 部 分 包含 一 个 div 总 容器 ， 在 
总 容器 下 包含 绘制 小 猫 的 div 容器 , 该 容器 下 包含 多 个 子 容器 , 每 个 子 容器 中 包含 不 同 的 内 容 。 

例如 ，id 为 mao_head 的 div 容器 用 于 绘制 小 猫 头 部 ，id 为 erduo 的 div 容器 用 于 绘制 小 
猫 耳 灯 ，id 为 yanjing 的 div 容器 用 于 绘制 小 猫 的 眼睛 等 。 以 下 为 完整 的 静态 内 容 : 


<div class="mao_box"> 
<div class="mao"> 


<!-- 头 部 --> 
<div class="mao_head"><div class="huawen"><div><!-- 头 部 花纹 一 左边 检 色 --></div></div> 
</div> 
<!-- 耳 休 --> 
<div class="erduo"><div></div><div></div></div> 
< 上 -- 眼睛 --> 
<div class="yanjing"> 
<div> 
<div class="yanquan"><div></div></div> 
<div class="yanquan_hedding"></div> 
<div class="hong"></div> 
</div> 


</div> 
</div> 


<div class="yan_right"> 


<div class="yanquan"><div></div></div> 
<div class="yanquan_hedding"></div> 


<div class="hong"></div> 


</div> 

<div style="clear:both"></div> 
</div> 
<!-- 花纹 -> 


<div class="face_huawen"> 
<div class="face_huawen_huawenhuawen_left"> 
<div></div><div></div><div></div><div></div><div></div> 
</div> 
<div class="face_huawen_huawenhuawen_right"> 
<div></div><div></div><div></div><div></div><div></div> 
</div> 
<div style="clear:both"></div> 
</div> 
<|-- 鼻子 --> 
<div class="bizi"><div></div><div></div><div></div><div></div></div> 
<|-- 嘴巴 --> 


<div class="zuiba_box"><div class="zuiba"><div></div><div></div><div></div></div></div> 


叫 ) 15.3.3 样式 代码 

HTML 静态 页 面 设计 完毕 后 ， 可 以 为 页 面 中 的 有 关 标签 设计 样式 ， 通 过 设计 样式 达到 给 
制 小 猫 笑脸 的 效果 ， 主 要 实现 步骤 如 下 。 

0 得 设计 HTML 网 页 和 页 面 主体 部 分 总 容器 的 样式 代码 ， 具 体 如 下 : 


body { margin: Opx; background: #F6F7A7; } 
.mao_box{ position: relative; top: 50px; } 


.mao{ margin: 0 auto; width: 400px; } 


因 坟 设计 小 猫 头 部 的 样式 ， 指 定 猫咪 头 部 的 宽度 、 高 度 、 背 景 颜色 、 边 框 样 式 、 圆 角 样 
式 以 及 显示 顺序 等 。 代 码 如 下 : 


.mao_head { 


margin: 0 auto; position: relative; overflow: hidden; 


width: 400px; * 宽度 *#/ 
height: 340px; * 高 度 */ 
background: #F6F7F2; /* 背景 颜色 */ 
border-radius: 50% 50% 35% 35%; 族 圆 角 效果 */ 
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border: solid 2px #2e2e2e; * 边框 样式 */ 
z-index: 10; * 显示 顺序 */ 
} 


名 设计 小 猫 头 部 的 花纹 ， 指 定 花纹 的 宽度 、 高 度 、 背 景 颜色 、 圆 角 等 ， 另 外 ， 需 要 指 
定 头 部 花纹 的 左边 颜色 为 橙色 ， 会 用 到 E:first-child 属性 选择 器 。 代 码 如 下 : 


.huawen { 
position: absolute; overflow: hidden; left: 110px; 
height: 160px; 廊 高 度 */ 
width: 180px; * 宽度 */ 
background: #8D8D8D; /* 背景 颜色 */ 
border-radius: 0% 0% 50% 50%; /* 圆 角 效果 */ 
} 
.huawen>div:first-child { 
height: 160px; 大 高 度 */ 
width: 90px; 让 宽度 */ 
background: #FOAC6B; /* 背景 颜色 */ 


} 


6 允 设计 小 猫 耳 末 的 通用 样式 ， 指 定 宽度 、 高 度 、 圆 角 等 属性 。 代 码 如 下 : 


.erduo{ 
width: 374px; height: 120px; position: absolute; top: -6px; left: 50%; margin-left: -187px; 
border-radius: 0% 0% 0% 0%; 

} 
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8 使 用 E:first-child 选择 器 设置 小 猫 左 耳 的 样式 ， 使 用 E:last-child 选择 器 设置 小 猫 右 耳 
的 样式 ， 如 宽度 、 高 度 、 边 框 、 圆 角 、 位 置 、 背 景 等 。 以 小 猫 左 耳 为 例 ， 主 要 样式 代码 如 下 : 


.erduo>div:first-child { 
height: 200px; width: 160px; border: 2px solid #2e2e2e; position: absolute; left: -20px; top: Opx; 
background: #f3f3f3;border-radius: 4% 80% 0% 50%; 
-ms-transform: rotate(-15deg); 
-moz-transform: rotate(-15deg); 
-webkit-transform: rotate(-15deg); 
-o-transform: rotate(-15deg); 
transform: rotate(-15deg); 
transition: transform 15s,left 1s; 


} 
看 设置 鼠标 浮动 时 小 猫 耳 杀 的 样式 ， 以 左 耳 为 例 ， 代 码 如 下 : 


.mao:hover .erduo>div:first-child { 
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left: -10px; border-radius: 4% 80% 0% 60%; 
transform: rotate(0deg); 
-ms-transform: rotate(0deg); 
-moz-transform: rotate(0deg); 
-webkit-transform: rotate(0deg); 


-o-transform: rotate(0deg); 


看 全 以 左 眼 为 例 ， 设 置 眼睛 的 样式 ， 如 左 眼睛 、 眼 珠子 、 浮 动 时 的 眼睛 效果 等 。 样 式 代 
码 如 下 : 


‘yanjing { 
height: 60px; width: 300px; position: absolute;top: 200px; z-index: 20; 
left: 50%; margin-left: -150px; overflow: hidden; 
} 
/* 左 眼 */ 
‘yanquan { 
height: 100px; width: 100px; border: 2px solid #2e2e2e; 
border-radius: 50% 50% 50% 50%;overflow: hidden; position: absolute; 
} 
眼珠 子 左 */ 
‘yanquan>div:first-child { 
height: 100px; width: 30px;background-color: #2e2e2e; margin-left: 35px;transition:all 1s; 
} 


.mao:hover .yanquan>div:first-child {width:40px;margin-left: 30px;} 
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.yanquan_hedding { 
height: 100px; width: 180px; border-top: 2px solid #2e2e2e; border-radius: 50% 50% 50% 50%; 
background: #F6F7F2; margin-top: 50px; margin-left: -40px; position: absolute; 
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transition: margin-top 1s; 
} 
.hong{ 
position: absolute; height: 28px; width: 70px; background: red; top: 34px; left: 18px; opacity: 0.0; 
border-radius: 50% 50% 50% 50%; 
background-image: -moz-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 
66%, rgba(253,234,247,0.8) 100%); 
background-image: -webkit-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 
66%, rgba(253,234,247,0.8) 100%); 
background-image: -ms-radial-gradient( 50% 50%, rgba(253,214,240,0.8) 0%, rgba(253,224,244,0.8) 
66%, rgba(253,234,247,0.8) 100%); 


而 名 设计 小 猫 脸 部 花纹 的 样式 ， 如 花纹 的 高 度 、 宽 度 、 位 置 、 旋 转角 度 等 。 以 左 脸 为 例 ， 
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部 分 代码 如 下 : 


.face_huawen { 
height: 80px; width: 380px; position: absolute; top: 190px; z-index: 20; left: 50%; margin-left: -190px; 
} 
.face_huawen_huawen>div:first-child { 
width: 30px; height: 10px; border-top: 6px #E53941 solid; border-radius: 30% 80% 20% 50%; 
transform: rotate(25deg); 
-ms-transform: rotate(25deg); 
-moz-transform: rotate(25deg); 
-webkit-transform: rotate(25deg); 
-0-transform: rotate(25deg); 
margin-left: 20px; 
} 


0g 设计 小 猫 鼻子 的 样式 ， 如 鼻子 的 宽度 、 高 度 、 位 置 、 圆 角 效 果 等 。 代 码 如 下 : 


.bizi { 

width: 30px;height: 36px;position: absolute;left: 50%;margin-left: -15px;top: 260px;z-index: 30; 
} 

.bizi>div:first-child { 

width: 30px;height: 10px;border-bottom: 8px solid #2e2e2e;border-radius: 0% 0% 50% 50%; 
margin-top: -10px; 


} 
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和 设置 小 猫 嘴巴 的 样式 ， 例 如 嘴巴 的 宽度 、 高 度 、 位 置 、 圆 角 特性 等 。 完 整 代 码 如 下 : 


1d 


.zuiba_box { 

width: 200px;height: 36px;position: absolute;overflow: hidden;left: 50%;margin-left: -100px; 
top: 260px;z-index: 30; 

} 

.Zuiba{margin-left: 85px;margin-top: 6px;} 

.zuiba>div:first-child { width: 4px;height: 8px;background: #2e2e2e;margin-left: 13px;} 

性 右 半边 嘴巴 */ 

.Zuiba>div:nth-child(2) { 

width: 50px; height: 40px; border-bottom: 4px solid #2e2e2e; border-left: 4px solid #2e2e2e; 
border-radius:40% 0% 20% 50%; margin-left: 13px; margin-top: -26px; position:absolute; 
transition: border-radius 1s; 

} 

/+ 左 半 边 嘴 巴 */ 

.zuiba>div:nth-child(3) { 

width: 50px; height: 40px; border-bottom: 4px solid #2e2e2e; border-right: 4px solid #2e2e2e; 
border-radius:0% 40% 50% 20%; margin-left: -38px; margin-top: -26px; position:absolute; 
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transition: border-radius 1s; 


} 
国 旬 设置 鼠标 悬浮 时 左 半 嘴 巴 和 右 半 嘴 巴 的 效果 。 代 码 如 下 ; 


.mao:hover .zuiba>div:nth-child(2) { 

border-radius: 50% 50% 50% 50%; 

width: 40px; 

} 

.mao:hover .zuiba>div:nth-child(3) { 

width: 40px; margin-left: -30px; border-radius: 50% 50% 50% 50%; 
} 


到 这 里 ， 呆 萌 的 小 猫 笑 脸 动 画 案例 已 经 绘制 完毕 。 读 者 可 以 运行 页 面 观察 效果 ， 根 据 效 
果 图 对 代码 进行 调整 和 优化 。 


7) 15.4 图片 轮 播 效果 展示 


CSS3 增加 的 动画 属性 在 一 定 程度 上 降低 了 动画 效果 的 实现 难度 ， 有 利于 设计 者 的 前 端 
开发 学 习 ， 其 精简 的 代码 量 可 以 把 读者 从 烦人 的 JavaScript 调试 中 解放 出 来 。 
细心 的 读者 可 以 发 现 ， 目 前 许多 企业 网 站 的 首页 都 有 图 片 轮流 播放 显示 的 功能 ， 该 功能 
可 以 直接 利用 CSS3 动画 代码 实现 。 本 节 案 例 主要 实现 图 片 轮 播 效果 。 


中 ) 15.4.1 效果 展示 


片 轮 播 非常 容易 理解 ， 即 当前 网 站 上 存在 多 张 图 片 ， 图 片 从 第 一 张 开 始 显示 ,间隔 一 定 
时 间 后 自动 显示 第 二 张 ,第 三 张 等 ,到 最 后 一 张 图 片 后 重新 从 第 一 张 图 片 开 始 显示 , 轮 播 效果 如 
图 15-4 所 示 。 
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图 15-4 图 片 轮 播 效果 
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串 ) 15.4.2 ”静态 页 面 


创建 HIML 静态 页 面 ， 该 页 面包 含 两 部 分 : 第 一 部 分 对 应 图 片 ， 第 二 部 分 表示 图 片 对 应 
的 轮 播 焦 点 。 完 整 代码 如 下 : 


<div class="github"><a href="#"> 网 站 首页 </a></div> 
<section class="slider-container"> 
<ul class="slider"> 
<liclass="slider-item slider-item1"></li> 
<liclass="slider-item slider-item2"></li> 
<liclass="slider-item slider-item3"></li> 
<liclass="slider-item slider-item4"></li> 
<liclass="slider-item slider-item5"></li> 
</ul> 
<div class="focus-container > 
<ul class="floatfix"> 
<li><div class="focus-item focus-item1"></div></li> 
<li><div class="focus-item focus-item2"></div></li> 
<li><div class="focus-item focus-item3"></div></li> 
<li><div class="focus-item focus-item4"></div></li> 
<li><div class="focus-item focus-item5"></div></li> 
</ul> 
</div> 
</section> 
</div> 
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1d 


叫 ) 15.4.3 ”样式 代码 


根据 上 述 的 页 面 代码 ， 为 网 页 中 的 标签 添加 样式 ， 主 要 实现 步骤 如 下 。 
看 和 设置 网 页 标签 的 统一 样式 代码 。 


* { margin: 0; padding: 0; } 
ul, li{ list-style: none; } 
a { text-decoration: none; color: #fff; } 


body { padding-top: 10px; background: #51B1D9; font: Helvetica, Arial, sans-serif; } 


加 咏 设置 “网 站 首页 ”链接 的 整体 样式 , 包含 文字 板块 的 宽度 、 文字 大 小 、 颜 色 、 边 框 等 ， 
还 包含 文字 超 链接 的 样式 以 及 鼠标 悬浮 时 的 样式 。 代 码 如 下 : 


.github { 
width: 200px; text-align: center; height: 60px;line-height: 60px; font-size: 24px;color: #fff; 
border: 1px solid; border-color: rgba(255, 255, 255, 0.5); margin: 0 auto; 


cursor: pointer; margin-bottom: 10px; 
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.github:hover { background: #29599B; } 


.github a { color: #fff; text-decoration: none; } 


83》 设置 图 片 总 容器 的 样式 ， 包 含 容 器 的 宽度 和 位 置 ， 图 片 的 透明 度 、 宽 度 、 位 置 、i 
渡 效 果 等 。 代 码 如 下 : 


.slider-container{ width: 100%; position: relative; } 
.Slider-item + .slider-item { opacity: 0; } 
.Slider-item { 
width: 100%; position: absolute; background-size: 100%; 
animation-timing-function: linear; 
animation-name: fade; 
animation-iteration-count: infinite; 


办 设置 图 片 轮 播 焦点 及 其 单个 项 目的 样式 。 代 码 如 下 : 


.focus-container { position: absolute; z-index: 7; margin: 0 auto; left: 0; right: 0; } 
.focus-container li{ 
width: 10px; height: 10px; border-radius: 50%; float: left; margin-right: 10px; background: #fff; 
} 
‘focus-item { 
width: 100%; height: 100%; border-radius: inherit; 
animation-timing-function: linear; 
animation-name: fade; 
animation-iteration-count: infinite; 
1 
,focus-item2, .focus-item3, .focus-item4, .focus-item5 { opacity: 0; } 


,focus-container ul{ margin-left: 46%; 0} 


四 设置 轮 播 焦点 的 位 置 和 当前 图 片 焦点 的 颜色 代码 。 


/* 设置 轮 播 焦点 的 位 置 */ 
.focus-container {bottom: 2%; } 

/+ 设置 当前 图 片 焦点 的 颜色 */ 
.focus-item { background: #51B1D9; } 


6》 设置 图 片 和 图 片 焦点 的 动画 特效 ， 使 图 片 和 焦点 的 动画 效果 保持 一 致 。 代 码 如 下 : 


.slider-item, .focus-item { animation-duration: 20s; } 
.slider-item1, .focus-item1 { animation-delay: -1s; } 
.slider-item2, .focus-item2 { animation-delay: 3s; } 
.slider-item3, .focus-item3 { animation-delay: 7s; } 


.slider-item4, .focus-item4 { animation-delay: 11s; } 
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.slider-item5, .focus-item5 { animation-delay: 15s; } 
@keyframes fade { 
0% {opacity: 0; z-index: 2; } 
5% {opacity: 1; z-index: 1; } 
20% { opacity: 1; z-index: 1; } 
25% {opacity: 0; z-index: 0;} 
100% { opacity: 0; z-index: 0; } 
} 


全 大 设置 图 片 项 目的 背景 图 片 ， 代 码 如 下 : 


.Slider-item1 { background-image: url(imgs/1.jpg); } 
.Slider-item2 { background-image: url(imgs/2.jpg); } 
.Slider-item3 { background-image: url(imgs/3.jpg); } 
.Slider-item4 { background-image: url(imgs/4.jpg); } 
,slider-item5 { background-image: url(imgs/5.jpg); } 


大 如 设置 图 片 的 高 度 ， 读 者 可 以 根据 具体 需要 修改 百分比 ， 比 如 元 素 的 底部 填充 。 代 码 
如 下 : 


.Slider, .slider-item { 
padding-bottom: 40%; 
} 


到 这 里 ， 所 有 关于 图 片 轮 播 的 网 页 代码 和 样式 代码 已 经 添加 完毕 。 读 者 可 以 运行 页 面 观 
察 效果 ， 根 据 效果 图 调整 代码 ， 以 达到 自己 需要 的 效果 。 

虽然 图 片 轮 播 效果 已 经 实现 ， 但 是 这 种 效果 并 不 是 万 能 的 ， 缺 点 也 不 言 而 喻 。 单 击 轮换 
和 自动 轮换 两 者 只 能 选 其 一 ， 不 过 自动 轮换 可 以 用 在 手机 端 ， 这 是 一 个 不 错 的 选择 。 另 外 ， 
现在 的 网 站 大 都 是 通栏 设计 ， 网 页 文字 很 少 ， 尤 其 是 网 站 首页 更 是 如 此 ， 有 时 比 的 不 是 网 站 
设计 的 优 务 ， 反而 是 谁 选 的 图 片 好 看 ， 谁 就 有 可 能 受到 青睐 。 这 种 情况 读者 可 以 考虑 将 轮 揪 

变 为 背景 的 轮换 ， 这 时 轮 播 焦点 就 可 以 不 用 了 。 如 果 博 客 首页 或 者 产品 首页 使 用 背景 轮换 ， 
效果 会 非常 不 错 。 
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